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/