Как прижать Footer?
Существует много разных способов прижатия футера к низу страницы, но этот как по мне самый удобный и понятный, а главное работающий. Ниже представлена 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.