31 мая 2012 г., 02:04 от Alan H.

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

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

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

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

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

04 сент. 2012 г., 07:21 от cereallarceny

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

Эта концепция использует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;
}
31 мая 2012 г., 06:10 от Niet the Dark Absol

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

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 вызываться один раз при загрузке страницы, так как это тоже необходимо)
(Вышеуказанная функция не проверена, но должна работать - если это не так, дайте мне знать, и я сделаю настоящую тестовую страницу)

25 окт. 2014 г., 06:18 от Dan Dascalescu

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>

ВАШ ОТВЕТ НА ВОПРОС