Примеров полно, но нет ни одного, чтоб с пояснением.
Asked
Active
Viewed 2,309 times
1
-
- Как прижать подвал к низу экрана?
- Как прижать футер (footer, подвал) к низу экрана?
- Как прижать подвал к низу страницы? Поиск по словам: как прижать подвал. Все примеры с пояснениями на русском.
– stanislav Sep 18 '11 at 15:23
3 Answers
3
Примерно так:
* {margin: 0;}
html, body {height: 100%;}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -97px; /* margin-bottom должен быть отрицательным со значением height у .footer, .push */
}
.footer, .push {height: 97px;} /* значение должно равняться margin-bottom у .wrapper (положительное число) */<div class="wrapper">
<!-- CONTENT -->
<div class="push"><!-- NO CONTENT --></div>
</div>
<div class="footer">
<!-- CONTENT -->
</div>
MobiDevices
- 7,309
omgwtf
- 416
-
@Vadizar скажите, чем лучше стал ответ от вашей правки? Вроде бы ничем. Если хотите принести пользу — оберните код в сниппет, этого здесь действительно не хватает. – Nick Volynkin Feb 24 '17 at 08:03
-
@NickVolynkin просто код без какого-либо комментария пугает людей. Я считаю неверным и думаю, вы согласитесь, оставлять полотно кода без комментариев. P.S. Обернул в сниппет. – MobiDevices Feb 24 '17 at 08:55
-
@NickVolynkin давайте продолжим обсуждение в чате и я объясню вам свою позицию и мы решим, стоит ли так делать или нет. – MobiDevices Feb 24 '17 at 09:12
1
Генератор HTML+CSS шаблонов - вот здесь возьмите, создайте шаблон, там есть функция прижатия футера. А там дальше вытащите из кода.
MobiDevices
- 7,309
trane294
- 519
1
1. Решение через абсолютное позиционирование для фиксированной высоты футера
html {
/* Растягиваем документ на всю высоту окна */
height: 100%;
}
body {
position: relative;
/* Растягиваем body по высоте html */
min-height: 100%;
}
main {
/* Выставляем отступ с высотой footer */
padding-bottom: 30px;
}
footer {
/* Позиционируем footer внизу main /
position: absolute;
bottom: 0;
width: 100%;
/ Высота footer */
height: 30px;
}
<body>
<header>
header
</header>
<main>
content
</main>
<footer>
footer
</footer>
</body>2. Решение через Flexbox для адаптивной высоты футера
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
/* Чтобы занимал оставшееся пространство */
flex-grow: 1;
}
footer {
/* Чтобы footer не уменьшался */
flex-shrink: 0;
}
<header>
header
</header>
<main>
content
</main>
<footer>
footer
</footer>3. Решение через таблицы для адаптивной высоты футера
body {
display: table;
min-height: 100vh;
}
main {
display: table-row;
/* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */
height: 100%;
}
<header>
header
</header>
<main>
content
</main>
<footer>
footer
</footer>4. Решение с использованием jQuery для адаптивной высоты футера
// Высчитываем высоту footer и делаем соответствующий отступ от main:
function footer(){
$('main').css('padding-bottom',$('footer').height());
}
window.addEventListener('load',footer);
window.addEventListener('resize',footer);html {
/* Растягиваем документ на всю высоту окна */
height: 100%;
}
body {
position: relative;
/* Растягиваем body по высоте html */
min-height: 100%;
}
main {
/* Выставляем отступ с высотой footer по умолчанию */
padding-bottom: 30px;
}
footer {
/* Позиционируем footer внизу main /
position: absolute;
bottom: 0;
width: 100%;
/ Высота footer по умолчанию */
height: 30px;
}
<html>
<head>
<script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script>
</head>
<body>
<header>
header
</header>
<main>
main
</main>
<footer>
footer
</footer>
</body>
</html>
MobiDevices
- 7,309