Подготовка полигона для испытаний
Набросаем простенькую страничку, на которой будем экспериментировать:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header>
<h1>HEADER - HEADER</h1>
</header>
<div class="content">
<div class="content-row">
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium molestias nulla neque omnis eaque ad perspiciatis cum mollitia excepturi sit. Amet, totam velit fugiat sunt voluptatum incidunt reprehenderit earum animi.</p>
<p>Sit excepturi natus velit laborum adipisci deserunt quasi veniam, pariatur non aspernatur fuga beatae dolorum cupiditate commodi maxime, id eligendi laboriosam molestiae iusto dignissimos ea et error assumenda architecto! Eos.</p>
<p>Perferendis animi totam, vel at reprehenderit veniam assumenda consequuntur perspiciatis similique. Eum repellat minus sed dolorem molestias, aperiam debitis hic! Quis obcaecati delectus iusto amet atque veritatis incidunt aspernatur temporibus.</p>
<p>Pariatur id ut obcaecati expedita, impedit ipsa error repudiandae fuga harum, saepe ratione perspiciatis recusandae! Hic numquam, beatae fuga laborum id illum voluptates voluptatibus ex deleniti mollitia nesciunt temporibus consequatur.</p>
</main>
<aside>
SIDEBAR
<br>
SIDEBAR
</aside>
</div>
</div>
<footer>
<h2>FOOTER - FOOTER</h2>
</footer>
</div>
</body>
</html>И зададим для нее такие же простенькие стили:
/* Декоративные стили */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
border: 2px dotted black;
}
header {
padding: 10px;
background: black;
color: white;
text-align: center;
}
.content-row {
display: flex;
}
main {
background: #eee;
padding: 10px;
}
aside {
background: #ddd;
padding: 10px;
}
footer{
background: #ffa;
text-align: center;
}Пока что это простое украшательство, мы добавили обертке штриховую рамку и раскрасили основные блоки — header, main, aside и footer, чтобы проще их различать. Текущий результат не очень впечатляет, правда?)
Футер висит где-то высоко над землей, а мы очень хотим его к этой земле приклеить.
Постановка задачи
Если в главном блоке мало контента, футер «прилипать» к низу странички. Если контента много, футер должен следовать за ним в нормальном потоке, скрываясь за нижней границей браузера. Другими словами, футер не должен маячить в нижней части страницы как приклеенный, если контент пытается выдавить его вниз.
Рассмотрим несколько вариантов решения проблемы.
Position: absolute
Предупреждение: данный способ годится только для футеров фиксированной высоты (для блока footer определено свойство height)!
footer {
height: 50px;
}Выдернем футер из общего потока контента и спозиционируем его абсолютно, причем позиционировать будем относительно нашей обертки (page), а точнее ее левого нижнего угла. Если мы абсолютно спозиционируем футер относительно самого окна браузера, он, конечно, прилипнет к низу, а вот отлепить его обратно будет уже проблематично. Даже когда контент начнет занимать всю страницу.
.page {
position: relative;
}
footer {
position: absolute;
left: 0;
bottom: 0;
}
Что произошло? Да в общем ничего, за исключением того, что ширина футера уменьшилась до ширины его содержимого, а сам он наполз на контент главного блока. Чтобы исправить это пропишем футеру 100% ширину, а блоку .content нижний паддинг (отступ).
footer {
width: 100%;
}
.content {
padding-bottom: 50px;
}При этом 100% будут браться от ширины блока .page, так как наш футер спозиционирован относительно него.
Однако, проблема по-прежнему не решена: футер парит высоко над землей. Логика подсказывает, что необходимо каким-то образом вытянуть наш шаблон на всю высоту экрана, но при этом не добавляя контент. Справиться с этой задачей поможет свойство минимальной высоты:
.page {
min-height: 100%;
}Ничего же не изменилось! — возмутитесь вы, и будете правы. Да, мы строго-настрого приказали блоку page растянуться минимум на 100% от высоты доступной ему области. Однако, мы забыли, что этот блок находится внутри тела нашего документа — тега body, а тот, в свою очередь, внутри html, которым никто не потрудился сообщить о том, что следует занять всю доступную высоту. Понаблюдать за этой связью мы можем, назначив body любую высоту, например:
body {
height: 600px;
}
Прогресс налицо — футер уполз вниз. Теперь просто задаем body и html 100%-ную высоту и радуемся прилипшему футеру.
html, body {
height: 100%;
}
Того же эффекта можно было добиться, просто установив блоку .page минимальную высоту в 100vh.
.page {
min-height: 100vh;
}See the Pen Sticky footer. Position absolute by furrycat (@furrycat) on CodePen.
Табличная верстка
Не пугайтесь, никто не заставляет вас верстать таблицами, эта технология постепенно отходит в прошлое. Однако, сложно отрицать тот факт, что таблицы в некоторых аспектах — вещь крайне удобная. Например, в позиционировании футера. Мы можем заставить наши блоки вести себя как строки таблицы с помощью CSS-свойства display:table-row. Это весьма удобный метод, который, к тому же, не требует категорично определять высоту футера.
Блок .page станет таблицей, а блоки header, .content и footer ее рядами.
.page {
display:table;
}
header, .content, footer {
display:table-row;
}На первый взгляд ничего не изменилось. Однако теперь давайте зададим таблице и ее родительским блокам 100%-ную высоту.
html,
body,
.page {
height: 100%;
}
Что такое произошло? Наша таблица растянулась на всю высоту экрана, но все высота блоков изменилась. Это волшебное свойство таблиц — автоматически балансировать высоту своих рядов в зависимости от содержимого. С этим очень легко разобраться. Зададим футеру и хедеру высоту в 1 пиксель. Не бойтесь, они не превратятся в узкие полоски, их реальная высота будет высчитываться в зависимости от контента. Этот способ лишь позволить блоку .content растянуться во всю высоту страницы.
header, footer {
height: 1px;
}
В принципе, никто не мешает и здесь задать конкретную высоту для футера или хедера.
See the Pen by furrycat (@furrycat) on CodePen.
Флексбоксы
На самом деле, таблицы — не самый лучший инструмент для верстки сайтов. Просто потому, что предназначены они для другого. Но принимая во внимание отсутствие специального инструмента, приходилось как-то крутиться. Теперь же этот инструмент есть и поддерживается он уже почти всеми браузерами.
Это флексбоксы.
С их помощью решение проблемы «липкого футера» осуществляется очень просто и очень изящно:
html, body {
height:100%;
}
.page {
display: flex;
min-height: 100%;
flex-direction: column;
}
.content {
flex: 1;
}
See the Pen Sticky footer. Flexbox by furrycat (@furrycat) on CodePen.
Вот и вся хитрость «липкого» футера.
Верстайте с удовольствием!
8 комментариев