Есть основной блок
Если контента нет или он не занимает достаточного места, нужно сделать чтобы минимальная высота .container была 100% от окна браузера. При этом футер должен быть внизу страницы и оставаться видимым.
Футер может менять высоту, но при этом он все равно должен оставаться прижатым к низу окна браузера.
.container { background: #fff; margin: auto; height: auto; width: 900px; }
Ответ
Для того, чтобы всегда прижимать футер к низу экрана, есть несколько решений:
1. Решение через абсолютное позиционирование для фиксированной высоты футера
html {
/* Растягиваем документ на всю высоту окна */
height: 100%;
}
body {
position: relative;
margin: 0;
color: #fff;
/* Растягиваем body по высоте html */
min-height: 100%;
}
header {
background: blue;
}
main {
/* Выставляем отступ с высотой footer */
padding-bottom: 30px;
background: red;
}
footer {
/* Позиционируем footer внизу main */
position: absolute;
bottom: 0;
width: 100%;
/* Высота footer */
height: 30px;
background: black;
}
2. Решение через Flexbox для адаптивной высоты футера
body {
margin: 0;
color: #fff;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background: blue;
}
main {
/* Чтобы занимал оставшееся пространство */
flex-grow: 1;
background: red;
}
footer {
/* Чтобы footer не уменьшался */
flex-shrink: 0;
background: black;
}
3. Решение через таблицы для адаптивной высоты футера
body {
margin: 0;
color: #fff;
display: table;
min-height: 100vh;
width: 100%;
}
header {
background: blue;
}
main {
display: table-row;
/* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */
height: 100%;
background: red;
}
footer {
background: black;
}
4. Решение на нативном JavaScript для адаптивной высоты футера
// Высчитываем высоту footer и делаем соответствующий отступ от main:
function footer(){
var
main = document.getElementsByTagName('main')[0],
footer = document.getElementsByTagName('footer')[0];
footerHeight = footer.clientHeight;
main.style.paddingBottom = (footerHeight)+'px';
}
window.addEventListener('load',footer);
window.addEventListener('resize',footer);
html {
/* Растягиваем документ на всю высоту окна */
height: 100%;
}
body {
position: relative;
margin: 0;
color: #fff;
/* Растягиваем body по высоте html */
min-height: 100%;
}
header {
background: blue;
}
main {
/* Выставляем отступ с высотой footer по умолчанию */
padding-bottom: 30px;
background: red;
}
footer {
/* Позиционируем footer внизу main */
position: absolute;
bottom: 0;
width: 100%;
/* Высота footer по умолчанию */
height: 30px;
background: black;
}
5. Решение через calc() для фиксированной высоты футера
html {
/* Растягиваем документ на всю высоту окна */
height: 100%;
}
body {
position: relative;
margin: 0;
color: #fff;
/* Растягиваем body по высоте html */
min-height: 100%;
}
header {
background: blue;
}
main {
/* Выставляем отступ с высотой footer и header */
min-height: calc(100vh - 30px - 18px);
background: red;
}
footer {
/* Высота footer */
height: 30px;
background: black;
}
6. Решение через Grid Layout для фиксированной высоты футера
html {
height: 100%;
}
body {
margin: 0;
color: #fff;
/* Растягиваем body по высоте html */
min-height: 100%;
display: grid;
grid-template-rows: [row1] 18px [row2] 1fr [row3] 30px;
grid-template-areas:
"header"
"main"
"footer";
}
header {
background: blue;
grid-area: header;
}
main {
background: red;
grid-area: main;
}
footer {
background: black;
grid-area: footer;
}
Комментариев нет:
Отправить комментарий