Прибиваем подвал (footer) к низу экрана, даже если на странице мало контента
Задача предельно понятна, нужно просто и грамотно прибить footer (подвал сайта) к низу экрана при отсутствии контента или его маленького количества. И суть проблемы изобразил схематически:
Что бы футер оставался внизу, используйте вот такой пример стилей для основных блоков:
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<header>Шапка</header>
<main>Мало контента</main>
<footer>Футер</footer>
</div>
</body>
</html>
И сами CSS стили:
, ::after, ::before {
box-sizing: border-box;
}
html {
display: flex; /* осевое координирование блоков */
min-height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
display: flex;
overflow-x: hidden;
}
.wrapper{
flex: 1 1 auto;
display: flex;
flex-flow: column;
justify-content: space-between;
}
.wrapper main {
flex: 1 1 auto;
display: block; /* обязательно нужно для IE, иначе выдаёт ошибку для блока main */
background: #eee;
}
.wrapper header,
.wrapper footer {
max-height: 50px;
flex: 0 0 50px;
background: #999;
}
Настоятельно рекомендую ознакомиться с свойствами display: flex; и всеми возможностями флексбоксов. Благодаря стилям выше мы получаем такую картину (пример на JSFiddle):
