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

Ключ, который следует отметить здесь, - это то, что высота нижнего колонтитула не будет исправлена, но будет отличаться по своему содержанию.

Когда я говорю "липкий нижний колонтитул", я использую его в том, что, как я понимаю, является общим определением "нижнего колонтитула, который никогда не выше нижней части окна просмотра, но если имеется достаточно контента, он будет скрыт до тех пор, пока пользователь прокручивается достаточно далеко, чтобы увидеть это."

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

Ответ 1

Все остальные решения здесь устарели и используют либо взлом JavaScript, либо table.

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

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

Гибкая модель поддерживается 96% + браузеров, используемых сегодня.

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 red;
}

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

Ответ 2

Вы можете сделать это в чистом CSS. Клик по ссылке.

Эта концепция использует 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;
}

Ответ 3

Переменная высота нижнего колонтитула вызывает небольшую проблему, но следующее должно работать:

<html>
<head>
<style type="text/css">
html { height: 100%; }
body { min-height: 100%; }
.container { min-height: 100%; position: relative; }
.content { padding-bottom: 200px; }
.footer { position: absolute; bottom: 0px; background: #ebebeb; text-align: centre; }
</style>
</head>
<body>
<div class="container">
    <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="footer">
        <p>This is my footer.</p>
        <p>This is another line of my footer.</p>
    </div>
</div>
</body>
</html>

Прокладка в нижней части .content означает, что нижний колонтитул никогда не будет перекрывать содержимое. Однако, учитывая, что ваш нижний колонтитул будет переменным размером, я бы использовал javascript для динамического добавления прописной части внизу содержимого после загрузки страницы или при каждом изменении высоты нижнего колонтитула:

<script type="text/javascript">
$(function() {
    $(".content").css("padding-bottom", parseInt($(".footer").height() + 20) + 'px');
});
</script>

Я знаю, что вы сказали чистый CSS, но я не думаю, что существует способ, с учетом переменной высоты и скрытых липких условий. Я думаю, что это самый маленький метод javascript.

Ответ 4

Вы можете прикрепить нижний колонтитул к нижней части окна просмотра:

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";
})();

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