Есть основной блок
с различным контентом, а под ним размещён футер.
Если контента нет или он не занимает достаточного места, нужно сделать чтобы минимальная высота .container была 100% от окна браузера. При этом футер должен быть внизу страницы и оставаться видимым.
Футер может менять высоту, но при этом он все равно должен оставаться прижатым к низу окна браузера.
.container { background: #fff; margin: auto; height: auto; width: 900px; }
header
content
header
content
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; }
header
content
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; }
header
content
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; }
header
content
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; }
header
content
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; }
header
content
Если контента нет или он не занимает достаточного места, нужно сделать чтобы минимальная высота .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; }
Комментариев нет:
Отправить комментарий