Bootstrap 3 Dopasuj stopkę do dołu. nie naprawiony

177

Używam Bootstrap 3 w przypadku witryny, którą projektuję.

Chcę mieć stopkę taką jak ta próbka. Próba

Pamiętaj, że nie chcę, aby to NAPRAWIONE, więc bootstrap navbar-fixed-bottom nie rozwiązuje mojego problemu. Chcę tylko, aby zawsze znajdował się na dole treści i był responsywny.

Każdy przewodnik będzie bardzo mile widziany.

EDYTOWAĆ:

Przepraszam, jeśli nie było jasne. Teraz dzieje się tak, że treść nie ma wystarczającej ilości treści. Moja stopka przesuwa się w górę, a następnie zostawia puste miejsce na dole.

Oto, co mam teraz dla mojego paska nawigacyjnego

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

html css twitter-bootstrap footer user3169403
źródło

Czy masz przykładowy kod, nad którym pracowałeś, a który sprawia Ci problem?

badAdviceGuy

Wygląda na to, że zwykła stopka, jeśli nie chcesz Naprawiono, możesz zaktualizować styl. Jaki masz problem?

Mutant

Kiedy jest to ostatnia rzecz w twoim HTML, zawsze będzie na dole. Zagmatwane pytanie, które wymaga przykładu kodu, aby zrozumieć, na czym polega problem.

Joe Conlin

stackoverflow.com/questions/643879/…

davidpauljunior

@davidpauljunior: To są lepkie stopki, których nie szukam

user3169403

124

Zobacz poniższy przykład. Spowoduje to umieszczenie stopki na dole, jeśli strona ma mniej treści i będzie zachowywać się jak normalna stopka, jeśli strona ma więcej treści.

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

AKTUALIZACJA : Nowa wersja Bootstrap pokazuje, jak dodać lepką stopkę bez dodawania otoki. Aby uzyskać więcej informacji, zobacz odpowiedź Jboy Flaga.

Surjith SM
źródło

Twoje linki są zepsute

Halter

2

Dlaczego w opakowaniu są dwie definicje właściwości wysokości?

Niezauważalne

@HardlyNoticeable jeden to min-width, aby wymusić opakowanie, nawet jeśli zawartość jest mniejsza.

Surjith SM

Wciąż zastanawiam się, dlaczego istnieją dwie definicje właściwości wysokości. Nie odpowiedziałeś na @SurjithSM

Erowlin

@Erowlin To jest błąd. nie potrzebujesz dwóch właściwości wysokości. Wystarczy tylko minimalna wysokość, zredagowałem odpowiedź.

Surjith SM

316

Jest tutaj uproszczone rozwiązanie z bootstrap (gdzie nie musisz tworzyć nowej klasy): http://getbootstrap.com/examples/sticky-footer-navbar/

Po otwarciu tej strony kliknij prawym przyciskiem myszy przeglądarkę i „Wyświetl źródło”, a następnie otwórz plik sticky-footer-navbar.css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar. css )

widać, że potrzebujesz tylko tego CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

dla tego HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

Jboy Flaga
źródło

19

To (z dokumentacji / przykładów Bootstrap) powinno być akceptowaną odpowiedzią.

richardm

5

U mnie to nie działa, ponieważ moja stopka jest dość wysoka. Świetnie, jeśli chcesz tylko akapit, ale mój ma kilka kolumn - używając tej metody, kończę z marginesem pod stopką, gdy

zejdę

9

Czy to nie jest rozwiązanie w postaci lepkiej stopki Bootstraps? Nie sądzę, żeby OP miał to na myśli. Dla mnie przy długiej stronie moja stopka pojawiała się na dole ekranu, ale nie na dole treści (czyli nad treścią). Musiałem zmienić Pozycja: absolutna; względne (w klasie .footer), aby to zadziałało.

Tino Mclaren

24

To byłaby prawidłowa odpowiedź, gdyby ten temat nie miał w tytule "not fixed" ...

ruudy

1

działa to tylko w przypadku stopek o stałym rozmiarze, wolę rozwiązanie Philipa Waltona zaproponowane przez @ChristopherTan, które jest super cienkie i niezależne od wysokości stopki

buergi

16

użyj flexbox, ponieważ możesz go używać do swojej dyspozycji. Rozwiązanie oferowane przez bootstrap 4 wciąż poluje na nakładające się treści w responsywnym układzie, np .: będzie się zepsuć w widoku mobilnym, natknąłem się na najbardziej zgrabną sztuczkę, aby skorzystać z demonstracji rozwiązania flexbox pokazanej tutaj :( https://philipwalton.github.io / rozwiązany po schematu flexbox / demos / lepkiej stopki / ) w ten sposób, że nie mamy do czynienia ze stałym kwestii wysokości, która jest rozwiązaniem przestarzałym już ... to rozwiązanie działa na bootstrap 3 i 4 w zależności od tego używasz.

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

Christopher Tan
źródło

1

To bardzo sprytne rozwiązanie. Myślę, że CSS ma zbyt wiele do zaoferowania, że nawet nie wiemy, jak najlepiej go wykorzystać.

Gilbert

2

Uwielbiam to rozwiązanie. Niesamowity.

Bagus Aji Santoso

14

AKTUALIZACJA: To nie odpowiada bezpośrednio na pytanie w całości, ale inni mogą uznać to za przydatne.

To jest kod HTML dla Twojej elastycznej stopki

<footer class="footer navbar-fixed-bottom">
     <div class="container">
     </div>
</footer>

Dla CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

UWAGA: w momencie wysyłania tego pytania powyższe wiersze kodu nie powodują wypychania stopki poniżej zawartości strony; ale zapobiegnie indeksowaniu stopki w połowie strony w górę, gdy na stronie jest mało treści. Aby zobaczyć przykład, który powoduje przesunięcie stopki pod zawartość strony, zajrzyj tutaj http://getbootstrap.com/examples/sticky-footer/

Rex CoolCode Charles
źródło

To właściwie złe rozwiązanie, ponieważ stopka zakrywa główną treść, gdy się spotykają. Musisz ustawić padding-bottomgłówny kontener zawartości równy wysokości stopki. I musisz to robić dynamicznie na stronie loadi resizewydarzeniach, a także w stopce DOMSubtreeModified.

tao

9

Dla osób, które wciąż mają problemy, a rozwiązanie, na które udzielono odpowiedzi, nie działa tak, jak chcesz, oto najprostsze rozwiązanie, jakie znalazłem.

Owiń główną treść i przypisz jej minimalną wysokość widoku. Dostosuj 60 do dowolnej wartości, jakiej potrzebuje Twój styl.

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

To wszystko i działa całkiem nieźle.

eGlu
źródło

Miałem ten sam problem, co ten, o którym mowa. Po wypróbowaniu prawie wszystkich wysoko ocenianych odpowiedzi, była to jedyna, która zadziałała dla mnie. I działał we wszystkich rozmiarach. Jedyna zmiana, którą wprowadziłem, to „min-height: 70vh”. Będzie to zależeć od rozmiarów nagłówka i stopki Twojej witryny.

Arfath

Powinien być wyższy, działa dokładnie tak, jak żądano.

ignam

To działało na moje potrzeby. Po prostu dostosuj wartość min-height, aż uzyskasz pożądany efekt.

sawyerrken

Cudownie, to najprostsze i najskuteczniejsze rozwiązanie problemu umieszczania stopki!

Prahlad Yeri

5

Galen Gidman opublikował naprawdę dobre rozwiązanie problemu elastycznej stopki, która nie ma stałej wysokości. Pełne rozwiązanie można znaleźć na jego blogu: http://galengidman.com/2014/03/25/responsive-f flexible-height-sticky-footers- in- css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

weiy
źródło

Wydaje się, że jest to zgodne z bootstrapem i dlatego powinno być akceptowaną odpowiedzią, imho. To nie jest idealne, ponieważ wydaje się, że pojawia się poziomy pasek przewijania.

Florian Mertens

Florian: Nie mam poziomego paska przewijania.

Niezauważalne

4

Aby uzyskać czyste rozwiązanie CSS, przewiń po drugim <hr>. Pierwsza to wstępna odpowiedź (udzielona w 2016 roku)

Główną wadą powyższych rozwiązań jest to, że mają one stałą wysokość stopki.
I to po prostu nie wystarcza w prawdziwym świecie, w którym ludzie używają miliardów urządzeń i mają zły nawyk obracania ich, kiedy najmniej się tego spodziewasz i ** Poof! ** zawartość Twojej strony znajduje się za stopką!

W prawdziwym świecie potrzebujesz funkcji, która oblicza wysokość stopki i dynamicznie dostosowuje zawartość strony padding-bottomdo tej wysokości. I musisz uruchomić tę małą funkcję na stronie loadi resizezdarzeniach, a także na stopce DOMSubtreeModified(na wypadek gdyby Twoja stopka była dynamicznie aktualizowana asynchronicznie lub zawierała animowane elementy, które zmieniają rozmiar podczas interakcji).

Oto dowód słuszności koncepcji przy użyciu jQuery v3.0.0i Bootstrap v4-alpha, ale nie ma powodu, dla którego nie miałby działać na niższych wersjach każdego z nich.

Pokaż fragment kodu

jQuery(document).ready(function($) {
  $.fn.accomodateFooter = function() {
    var footerHeight = $('footer').outerHeight();
    $(this).css({
      'padding-bottom': footerHeight + 'px'
    });
  }
  $('footer').on('DOMSubtreeModified', function() {
    $('body').accomodateFooter();
  })
  $(window).on('resize', function() {
    $('body').accomodateFooter();
  })
  $('body').accomodateFooter();
  window.addMoreContentToFooter = function() {
    var f = $('footer');
    f.append($('<p />', {
        text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
      }))
      .append($('<hr />'));
  }
});

body {
  min-height: 100vh;
  position: relative;
}

footer {
  background-color: rgba(0, 0, 0, .65);
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.5rem;
  display: block;
}

footer hr {
  border-top: 1px solid rgba(0, 0, 0, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .21);
}

<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://v4-alpha.getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="container">
  <div class="starter-template">
    <h1>Feed that footer - not a game (yet!)</h1>
    <p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button>
    <hr />
    <blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.0.0</code> and Bootstrap <code>v4-alpha</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
  </div>
</div>

<footer>I am a footer with dynamic content.
  <hr />
</footer>

Rozwiń fragment

Początkowo zamieściłem to rozwiązanie tutaj, ale zdałem sobie sprawę, że może pomóc większej liczbie osób, jeśli zostanie wysłane pod to pytanie.

Uwaga: Mam celowo owinął $([selector]).accomodateFooter()jako plugin jQuery, więc to może być uruchamiany na dowolnym elemencie DOM, jak w większości układów nie jest to $('body')„s bottom-padding, że potrzeby regulacji, ale niektóre strona wrapper elementu z position:relative(zazwyczaj natychmiastowe dominującą footer) .

Późniejsza edycja (ponad 3 lata po pierwszej odpowiedzi):

W tym momencie nie uważam już za dopuszczalne używanie JavaScript do pozycjonowania dynamicznej stopki treści na dole strony. Można to osiągnąć za pomocą samego CSS, używając flexboksa, błyskawicznego działania w różnych przeglądarkach.

Oto ona:

Pokaż fragment kodu

// Left this in so you could inject content into the footer and test it:
// (but it's no longer sizing the footer)

function addMoreContentToFooter() {
  var f = $('footer');
  f.append($('<p />', {
      text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
    }))
    .append($('<hr />'));
}

.wrapper {
  min-height: 100vh;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
}

.wrapper>* {
  flex-grow: 0;
}

.wrapper>main {
  flex-grow: 1;
}

footer {
  background-color: rgba(0, 0, 0, .65);
  color: white;
  width: 100%;
  padding: 1.5rem;
}

footer hr {
  border-top: 1px solid rgba(0, 0, 0, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .21);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="wrapper">
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  <main>
    <div class="container">
      <div class="starter-template">
        <h1>Feed that footer - not a game (yet!)</h1>
        <p class="lead">Footer won't ever cover the body contents, as its not fixed. It's simply placed at the bottom when the page should be shorter using `min-height:100vh` on container and using flexbox to push it down.</p><button class="btn btn-warning" onclick="addMoreContentToFooter()">Feed that footer</button>
        <hr />
        <blockquote class="lead">
          <strong>Note:</strong> This example uses current latest versions of jQuery (<code>3.4.1.slim</code>) and Bootstrap (<code>4.4.1</code>) (unlike the one above).
        </blockquote>
      </div>
    </div>
  </main>
  <footer>I am a footer with dynamic content.
    <hr />
  </footer>
</div>

Rozwiń fragment

tao
źródło

3

Ta metoda wykorzystuje minimalne znaczniki. Po prostu umieść całą swoją zawartość w .wrapper, który ma dopełnienie-dół i ujemny dół marginesu równe wysokości stopki (w moim przykładzie 100px).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>

Vin
źródło

2

Albo to

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>

AnBisw
źródło

1

W przypadku Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>

shilovk
źródło

2

Pytanie konkretnie stwierdza, że navbar-fixed-bottomto NIE rozwiązuje problem.

p4sh4

1

Żadne z tych rozwiązań nie działało idealnie, ponieważ w stopce użyłem klasy navbar-inverse. Ale otrzymałem rozwiązanie, które działało i nie zawierało Javascript. Używał przeglądarki Chrome do tworzenia zapytań o media. Wysokość stopki zmienia się wraz ze zmianą rozmiaru ekranu, więc musisz zwrócić na to uwagę i odpowiednio dostosować. Treść stopki (ustawiłem id = "footer", aby zdefiniować moją treść) powinna używać postion = bezwzględna i bottom = 0, aby pozostawić ją na dole. Również szerokość: 100%. Oto mój CSS z zapytaniami o media. Będziesz musiał dostosować min-width i max-width oraz dodać lub usunąć niektóre elementy:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}

Brian Edwards
źródło

0

Oto, co zadziałało u mnie przy użyciu Flexbox :

.body-class {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.body-content {
    flex: 1 0 auto;
    width: 100%;
}

.footer {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    flex: none;
}

Źródło: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Leniel Maccaferri
źródło

Bootstrap 3 Dopasuj stopkę do dołu. nie naprawiony

Odpowiedzi: