Абсолютно нижний футер (Sticky Footer)

?> Обзор: calc(), flex

Что такое "Sticky Footer"

Слово Sticky Footer относится к веб-эффекту, при котором если содержание страницы недостаточно длинное, футер прикрепляется к самому низу области просмотра; если же содержание достаточно длинное, то футер располагается сразу под ним. Эффект примерно такой:

Используется вычислительная функция calc() для расчета минимальной высоты контента как (высота окна - высота шапки - высота футера).```markdown

<script v-pre type="text/x-template" id="sticky-calc"> <style> main { width: 100%; height: 392px; } section input:checked ~ p { display: none } .main > header, .main > section, .main > footer { padding: .1em calc(50% - 329px); text-align: justify; hyphens: auto; } header { text-align: center; } section { box-sizing: border-box; min-height: calc(100% - 59px - 107px); } footer { color: white; background: #747e7f; } </style>

Заголовок сайта

Переключение содержимого

Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла.

Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя.

Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф запПараграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла. Параграф заполнителя. Лала ла де дах де дах де дах де ла.

© 2018 LHammer

Необходимо знать CSS Tricks для веб-разработчика.

<script> </script> ```> Flexbox `display: flex`:👍<script v-pre type="text/x-template" id="sticky-flex"> <style> main{ width: 100%; height: 392px; display: flex; flex-direction: column; } section input:checked ~ p{ display: none } .main > header, .main > section, .main > footer{ padding: 0.1em calc(50% - 329px); text-align: justify; hyphens: auto; } header{ text-align: center; } section { flex: 1; } footer{ color: white; background: #747e7f; } </style>

Заголовок сайта

Переключение содержимого

Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем.

Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем.

Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем. Лололо лололо лололо лололо. Параграф с заполнителем.

</script>Параграф с заполнителем. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Параграф с заполнителем. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

© 2018 LHammer

CSS Tricks необходимы для веб-разработчика.

<script> </script> </script>### Поддержка браузерами <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=calc&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe> <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=flexbox&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="480px"></iframe>