Stopka na dole strony lub treści, w zależności od tego, która z tych wartości jest niższa

Question 1

Mam następującą strukturę:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

Treść ładuję dynamicznie za <article>pomocą javascript. Z tego powodu wysokość <article>bloku może się zmieniać.

Chcę, aby <footer>blok znajdował się u dołu strony, gdy jest dużo treści, lub u dołu okna przeglądarki, gdy istnieje tylko kilka wierszy treści.

W tej chwili mogę zrobić jedno lub drugie ... ale nie oba.

Więc czy ktoś wie, jak mogę to zrobić - spraw, <footer>aby przykleił się do dołu strony / treści lub do dołu ekranu, w zależności od tego, który jest niższy.

Question 2

Lepka stopka Ryana Faita jest bardzo ładna, jednak brakuje jej podstawowej struktury *.

Wersja Flexbox

Jeśli masz szczęście, że możesz używać flexboksa bez konieczności obsługi starszych przeglądarek, lepkie stopki stają się trywialnie łatwe i obsługują stopki o dynamicznych rozmiarach.

Sztuczka polegająca na przyklejeniu stopek do dna za pomocą flexbox polega na tym, że inne elementy w tym samym pojemniku wyginają się w pionie. Wystarczy otoczyć element o pełnej wysokości z display: flexco najmniej jednym elementem podrzędnym o flexwartości większej niż 0:

_CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

Pokaż fragment kodu

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Rozwiń fragment

Jeśli nie możesz użyć flexboksa, moja podstawowa struktura to:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

Co wcale nie jest dalekie od:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

Sztuczka polegająca na przyklejeniu stopki polega na zakotwiczeniu stopki w dolnej wyściółce elementu zawierającego ją. To wymaga , aby wysokość stopce jest statyczna, ale odkryłem, że stopki są zazwyczaj od wysokości statycznej.

_HTML:

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

_CSS:

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Pokaż fragment kodu

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Rozwiń fragment

Po zakotwiczeniu stopki do #main-wrapperstrony musisz #main-wrappermieć co najmniej wysokość strony, chyba że jej elementy podrzędne są dłuższe. Odbywa się to poprzez #main-wrappermieć min-heightz 100%. Musisz także pamiętać, że jego rodzice htmli również bodymuszą być tak wysokie jak strona.

_CSS:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Pokaż fragment kodu

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Rozwiń fragment

Oczywiście powinieneś kwestionować mój osąd, ponieważ ten kod wymusza wypadnięcie stopki z dołu strony, nawet jeśli nie ma treści. Ostatnią sztuczką jest zmiana modelu pudełka używanego przez the, #main-wrappertak aby min-heightof 100%zawierał 100pxwypełnienie.

_CSS:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Pokaż fragment kodu

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Rozwiń fragment

I masz to, lepką stopkę z oryginalną strukturą HTML. Po prostu upewnij się, że wartość footer's heightjest równa #main-wrapper' s padding-bottomi powinieneś być ustawiony.

^{* Powodem, dla którego uważam, że struktura Fait jest błędna, jest to, że ustawia ona elementy .footeri .headerna różnych poziomach hierarchii, jednocześnie dodając niepotrzebny .pushelement.}

Question 3

Lepka stopka Ryana Faita to proste rozwiązanie, z którego korzystałem kilka razy w przeszłości.

Podstawowy HTML :

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS :

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Tłumaczenie tego, by było podobne do tego, co już masz, skutkuje następującymi słowami:

HTML :

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

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

Po prostu nie zapomnij zaktualizować wartości ujemnej na marginesie opakowania, aby pasowała do wysokości stopki, i naciśnij element div. Powodzenia!

Question 4

Chciałem rozwiązać ten problem bez dodawania żadnych dodatkowych znaczników, więc ostatecznie skorzystałem z następującego rozwiązania:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}

<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

Rozwiń fragment

Musisz znać wysokość nagłówka, nawigacji i stopki, aby móc ustawić minimalną wysokość artykułu. Dzięki temu, jeśli artykuł ma tylko kilka wierszy treści, stopka będzie przyklejona do dołu okna przeglądarki, w przeciwnym razie znajdzie się pod całą treścią.

Możesz znaleźć to i inne rozwiązania zamieszczone powyżej tutaj: https://css-tricks.com/couple-takes-sticky-footer/

Answer 1

Mam następującą strukturę:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

Treść ładuję dynamicznie za <article>pomocą javascript. Z tego powodu wysokość <article>bloku może się zmieniać.

Chcę, aby <footer>blok znajdował się u dołu strony, gdy jest dużo treści, lub u dołu okna przeglądarki, gdy istnieje tylko kilka wierszy treści.

W tej chwili mogę zrobić jedno lub drugie ... ale nie oba.

Więc czy ktoś wie, jak mogę to zrobić - spraw, <footer>aby przykleił się do dołu strony / treści lub do dołu ekranu, w zależności od tego, który jest niższy.

Answer 2

Czy ludzie chcieliby skomentować, dlaczego głosowali w dół na pytanie sprzed 2 lat?

Będzie

Answer 3

Daj spokój, minęło już prawie 6 lat ...

Will

Answer 4

Lepka stopka Ryana Faita jest bardzo ładna, jednak brakuje jej podstawowej struktury *.

Wersja Flexbox

Jeśli masz szczęście, że możesz używać flexboksa bez konieczności obsługi starszych przeglądarek, lepkie stopki stają się trywialnie łatwe i obsługują stopki o dynamicznych rozmiarach.

Sztuczka polegająca na przyklejeniu stopek do dna za pomocą flexbox polega na tym, że inne elementy w tym samym pojemniku wyginają się w pionie. Wystarczy otoczyć element o pełnej wysokości z display: flexco najmniej jednym elementem podrzędnym o flexwartości większej niż 0:

_CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

Pokaż fragment kodu

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Rozwiń fragment

Jeśli nie możesz użyć flexboksa, moja podstawowa struktura to:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

Co wcale nie jest dalekie od:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

Sztuczka polegająca na przyklejeniu stopki polega na zakotwiczeniu stopki w dolnej wyściółce elementu zawierającego ją. To wymaga , aby wysokość stopce jest statyczna, ale odkryłem, że stopki są zazwyczaj od wysokości statycznej.

_HTML:

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

_CSS:

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Pokaż fragment kodu

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Rozwiń fragment

Po zakotwiczeniu stopki do #main-wrapperstrony musisz #main-wrappermieć co najmniej wysokość strony, chyba że jej elementy podrzędne są dłuższe. Odbywa się to poprzez #main-wrappermieć min-heightz 100%. Musisz także pamiętać, że jego rodzice htmli również bodymuszą być tak wysokie jak strona.

_CSS:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Pokaż fragment kodu

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Rozwiń fragment

Oczywiście powinieneś kwestionować mój osąd, ponieważ ten kod wymusza wypadnięcie stopki z dołu strony, nawet jeśli nie ma treści. Ostatnią sztuczką jest zmiana modelu pudełka używanego przez the, #main-wrappertak aby min-heightof 100%zawierał 100pxwypełnienie.

_CSS:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Pokaż fragment kodu

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Rozwiń fragment

I masz to, lepką stopkę z oryginalną strukturą HTML. Po prostu upewnij się, że wartość footer's heightjest równa #main-wrapper' s padding-bottomi powinieneś być ustawiony.

^{* Powodem, dla którego uważam, że struktura Fait jest błędna, jest to, że ustawia ona elementy .footeri .headerna różnych poziomach hierarchii, jednocześnie dodając niepotrzebny .pushelement.}

Answer 5

Musiałem dodać #main-wrapper *:first-child { margin-top: 0; }, w przeciwnym razie strona byłaby zbyt długa przy górnym marginesie pierwszego dziecka (powodując niepotrzebny pasek przewijania na krótkich stronach).

Florian Brucker

Answer 6

Dziękuję @zzzzBov za to dokładne wyjaśnienie, a zwłaszcza za wspomnienie o flex-direction (szkoda, że nie znalazłem tego wcześniej - zaoszczędziłoby mi to kilka godzin! :)

ea0723

Answer 7

Wersja Flexbox nie działa dla mnie w IE11, ale inne podejście jest dla mnie dobre! Dzięki i +1!

Matt

Answer 8

@Matt, musisz użyć prefiksów przeglądarki, aby flexbox działał w IE11. użyj narzędzia takiego jak autoprefixer i nigdy nie będziesz musiał martwić się o ich ręczne dodawanie.

zzzzBov

Answer 9

2

Wydaje się, że łącze przyklejonej stopki jest uszkodzone, ponieważ jego witryna została przekształcona w powiadomienie In Memoriam dla niego. Ponadto nie ma wersji z pamięci podręcznej ze względu na ustawienia

pliku

Answer 10

Lepka stopka Ryana Faita to proste rozwiązanie, z którego korzystałem kilka razy w przeszłości.

Podstawowy HTML :

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS :

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Tłumaczenie tego, by było podobne do tego, co już masz, skutkuje następującymi słowami:

HTML :

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

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

Po prostu nie zapomnij zaktualizować wartości ujemnej na marginesie opakowania, aby pasowała do wysokości stopki, i naciśnij element div. Powodzenia!

Answer 11

4

Uwielbiam sposób, w jaki umieścił komentarz na dole, odpowiedni dla rozwiązania w stopce: D

Madara's Ghost

Answer 12

Nie ma potrzeby zmieniania znaczników dla tego konkretnego stylu.

zzzzBov

Answer 13

@zzzzBov Nie mam teraz zbyt wiele czasu, aby dokładniej się temu przyjrzeć, ale co dokładnie masz na myśli?

Josh Mein

Answer 14

Jestem w swoim mobilnym bankomacie, więc nie mogę napisać pełnej odpowiedzi, w przeciwnym razie już bym to zrobił. Komentarz był bardziej, więc pamiętam, aby dodać odpowiedź później.

zzzzBov

Answer 15

@JoshMein, dodałem odpowiedź, która wyjaśnia, jak sprawić, by stopka była przyczepiona bez naruszania dostarczonej struktury.

zzzzBov

Answer 16

Chciałem rozwiązać ten problem bez dodawania żadnych dodatkowych znaczników, więc ostatecznie skorzystałem z następującego rozwiązania:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}

<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

Rozwiń fragment

Musisz znać wysokość nagłówka, nawigacji i stopki, aby móc ustawić minimalną wysokość artykułu. Dzięki temu, jeśli artykuł ma tylko kilka wierszy treści, stopka będzie przyklejona do dołu okna przeglądarki, w przeciwnym razie znajdzie się pod całą treścią.

Możesz znaleźć to i inne rozwiązania zamieszczone powyżej tutaj: https://css-tricks.com/couple-takes-sticky-footer/

Stopka na dole strony lub treści, w zależności od tego, która z tych wartości jest niższa

Odpowiedzi:

Wersja Flexbox