Колонтитул внизу сторінки або вмісту, залежно від того, що нижче

Question 1

У мене така структура:

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

Я динамічно завантажую вміст за <article>допомогою JavaScript. Через це висота <article>блоку може змінюватися.

Я хочу, щоб <footer>блок знаходився внизу сторінки, коли багато вмісту, або внизу вікна браузера, коли існує лише кілька рядків вмісту.

На даний момент я можу зробити те чи інше ... але не те й інше.

Тож хто-небудь знає, як я можу це зробити - нехай <footer>дотримується нижньої частини сторінки / вмісту або нижньої частини екрана, залежно від того, яка нижча.

Question 2

Клейкий нижній колонтитул Райана Фейта дуже приємний, проте я вважаю, що його основної структури бракує *.

Версія Flexbox

Якщо вам пощастило, що ви можете використовувати flexbox, не потребуючи підтримки старих браузерів, липкі колонтитули стають тривіально простими та підтримують нижній колонтитул динамічного розміру.

Фокус у тому, щоб колонтитули прилипали до дна за допомогою flexbox, полягає в тому, щоб інші елементи в тому ж контейнері згиналися вертикально. Для цього потрібен лише елемент обгортки на всю висоту з display: flexпринаймні одним братом та сестрою зі flexзначенням, більшим за 0:

_CSS:

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

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

article {
  flex: 1;
}

Показати фрагмент коду

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>

Розгорніть фрагмент

Якщо ви не можете використовувати flexbox, моя основна структура вибору:

<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>

Що далеко не все так далеко:

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

Фокус, щоб закріпити нижній колонтитул, полягає в тому, щоб нижній колонтитул прикріпився до нижньої оббивки його вміщуючого елемента. Для цього потрібно, щоб висота нижнього колонтитула була статичною, але я виявив, що нижній колонтитул зазвичай має статичну висоту.

_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%;
}

Показати фрагмент коду

#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>

Розгорніть фрагмент

Коли нижній колонтитул прикріплений до #main-wrapper, тепер вам потрібно #main-wrapperмати принаймні висоту сторінки, якщо тільки її діти не довші. Це робиться шляхом #main-wrapperє min-heightз 100%. Ви також повинні пам’ятати, що його батьки htmlтакож bodyповинні мати висоту сторінки.

_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%;
}

Показати фрагмент коду

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>

Розгорніть фрагмент

Звичайно, ви повинні поставити під сумнів моє судження, оскільки цей код змушує нижній колонтитул падати внизу сторінки, навіть коли вмісту немає. Останній фокус полягає в тому, щоб змінити модель коробки, яка використовується таким #main-wrapperчином, щоби min-heightof 100%включала 100pxпрокладку.

_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%;
}

Показати фрагмент коду

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>

Розгорніть фрагмент

І ось у вас це, липкий нижній колонтитул із оригінальною структурою HTML. Просто переконайтесь, що footer's heightдорівнює #main-wrapper' padding-bottom, і ви повинні бути встановлені.

^{* Причиною того, що я виявляю недолік у структурі Fait, є те, що вона встановлює елементи .footerand .headerна різні ієрархічні рівні, додаючи непотрібний .pushелемент.}

Question 3

Клейкий колонтитул Райана Фейта - це просте рішення, яке я використовував кілька разів раніше.

Основний 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/

*/

Переклавши це схоже на те, що у вас вже є результати, щось подібне:

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 */
}

Просто не забудьте оновити мінус на полі обгортки відповідно до висоти нижнього колонтитула та натисніть div. Удачі!

Question 4

Я прагнув вирішити цю проблему, не додаючи жодної додаткової розмітки, тому в підсумку застосував таке рішення:

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>

Розгорніть фрагмент

Ви повинні знати висоту верхнього, нижнього та нижнього колонтитулів, щоб мати можливість встановити мінімальну висоту для статті. Таким чином, якщо стаття має лише кілька рядків вмісту, нижній колонтитул буде прилипати до нижньої частини вікна браузера, інакше він буде опускатися нижче всього вмісту.

Ви можете знайти це та інші рішення, розміщені вище тут: https://css-tricks.com/couple-takes-sticky-footer/