Как определить липкий нижний колонтитул переменной высоты в чистом CSS?

Здесь необходимо отметить, что высота нижнего колонтитула не будет фиксированной, но будет зависеть от ее содержимого.

Когда я говорю «липкий нижний колонтитул», ##201D; Я использую его в том, что, как я понимаю, является общим определением нижнего колонтитула, который никогда не превышает нижнюю часть области просмотра, но если контента достаточно, он будет скрыт до тех пор, пока пользователь не прокрутит его достаточно далеко, чтобы увидеть это & # x201D.

Обратите внимание, что мне не нужно поддерживать устаревшие браузеры. Если CSSdisplay: table & Амп; здесь помогают связанные свойства, они являются честной игрой.

Ответы на вопрос(3)

Нажмите на ссылку.

Эта концепция используетdisplay: table-cell организуйте свои разделы страницы, а не нормальныеdisplay: block.

HTML

<body class="Frame">
    <header class="Row"><h1>Catchy header</h1></header>
    <section class="Row Expand"><h2>Awesome content</h2></section>
    <footer class="Row"><h3>Sticky footer</h3></footer>
</body>

CSS

.Frame {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}
.Row {
    display: table-row;
    height: 1px;
}
.Row.Expand {
    height: auto;
}
 cereallarceny01 июл. 2015 г., 21:07
Хорошая идея, добавил!
 Dan Dascalescu19 февр. 2015 г., 00:46
Нет никакихtable-cell в примере. Вы имеете в видуtable-row? Во всяком случае, современный способ сделать это состоит в использовании Модель флексбокса СС.
 Alan H.04 сент. 2012 г., 19:55
Хотя в примере кода что-то отсутствует, да, это возможно с помощью этой техники.
 Philipp Michael01 июл. 2015 г., 16:57
Ты должен добавитьtable-layout: fixed; в класс Frame. Без этого у меня были некоторые проблемы с шириной в IE. Содержимое переполнялось независимо от максимальной ширины.
 cereallarceny04 сент. 2012 г., 20:13
Вы правы! Я исправил это, рад, что это сработало для вас!

олько с помощью:

position: fixed;
bottom: 0;

Как бы то ни было, он появится даже при наличии контента.

Чтобы предотвратить это, вам понадобится немного JavaScript:

(window.onscroll = function() {
    var foot = document.getElementById('footer');
    foot.style.position = "static";
    if( foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight)
        foot.style.position = "fixed";
})();

(The(...)(); wrapper заставляет функцию onscroll вызываться один раз при загрузке страницы, так как это тоже необходимо)
(Вышеуказанная функция не проверена, но должна работать - если это не так, дайте мне знать, и я сделаю настоящую тестовую страницу)

 Aaria Carter-Weir22 сент. 2015 г., 03:43
(...) (); это просто самореализующийся fn не так ли?
 Niet the Dark Absol23 сент. 2015 г., 01:39
Я повторяюсь, но плохо XD Извините за путаницу.
 Niet the Dark Absol22 сент. 2015 г., 06:31
Да - это в основном делает функцию вызываемой один раз без необходимости прокрутки, а затем снова каждый раз, когда запускается событие onscroll.
 Aaria Carter-Weir23 сент. 2015 г., 01:47
Я сейчас за тобой. Я немного запутался, но это довольно изящный способ сделать это.
 Aaria Carter-Weir23 сент. 2015 г., 01:37
Так что это не правильно? "(Оболочка (...) (); заставляет функцию onscroll вызываться один раз при загрузке страницы, поскольку это тоже необходимо)"
Решение Вопроса

table хаки.

С появлением CSS flex model, решение проблемы липкого нижнего колонтитула с переменной высотой становится очень и очень простым: хотя Flexbox в основном известен тем, что размещает содержимое в горизонтальном направлении, он фактически работает и для задач вертикального размещения. Все, что вам нужно сделать, это обернуть вертикальные секции в гибкий контейнер и выбрать, какие из них вы хотите расширить. Они автоматически займут все доступное пространство в своем контейнере.

Отметьте, насколько просты разметка и CSS. Нет таблицы взломов или что-нибудь.

Гибкая модель поддерживается всеми основными браузерами а также якобы IE11 +, хотя мой IE еще не правильно отображает этот фрагмент.

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#body {
  flex: 1;
  border: 1px solid orange;
}

#footer{
  background: lime;
}
<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

 Niet the Dark Absol19 февр. 2015 г., 14:57
Верно. Возможно, лучшая часть в том, что он хорошо ухудшается.
 Alan H.05 нояб. 2014 г., 00:02
Спасибо за возрождение этого вопроса с более новой (если менее совместимой) техникой, дополненной исполняемым кодом. A +
 Mathias20 апр. 2015 г., 18:09
это не работает в сафари 8.
 Milimetric24 мар. 2016 г., 14:54
Я также вижу проблему сmin-height: 100% вместо тогоheight: 100% в #wrapper, в Chrome на Linux. Прокручивает всю страницу с помощьюmin-height и только тело сheight.

Ваш ответ на вопрос