Существует много разных способов прижатия футера к низу страницы, но этот как по мне самый удобный и понятный, а главное работающий. Ниже представлена HTML разметка и необходимые стили.
HTML
|
1
2
3
4
5
6
7
8
9
|
<body>
<div class=«wrapper»>
... ... ...
<div class=«block-empty»></div> // перед закрывающимся wrapper’ом
</div>
<footer>
... ... ...
</footer>
</body>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
* {
box—sizing: border—box;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
min—height: 100%;
overflow: hidden; // чтобы не появился горизонтальный скролл
position: relative;
}
footer {
height:200px;
}
|
Уберем появившийся скролл и натянем наш footer на wrapper:
|
1
2
3
|
footer {
margin—top: —200px; // высота <em>footer</em>
}
|
Теперь наш footer залез под wrapper, приорететы поменялись, так как у wrapper свойство position:relative, а у footer отрицательный отступ (margin). Добавим свойство position со значением relative к футеру чтобы уровнять приоритеты.
|
1
2
3
4
|
footer {
margin—top: —200px;
<em> position: relative;</em> // уравняли приоритеты
}
|
Приоритеты z-index по умолчанию расставляются сверху вниз, если какой-то блок меняет свойство position: static, то приоритет меняется и этот блок становится выше по невидимой оси z, контент будет залезать под футер , теперь зададим блоку .block-empty высоту :
|
1
2
3
|
.block—empty {
height:200px;
}
|
Вместо блока block-empty можно использовать также просто wrapper:after.
