Как прижать Footer?

как прижать footer

Существует много разных способов прижатия футера к низу страницы, но этот как по мне самый удобный и понятный, а главное работающий. Ниже представлена HTML разметка и необходимые стили.

HTML

 

CSS

Уберем появившийся скролл и натянем наш footer на wrapper:

Теперь наш  footer залез под wrapper, приорететы поменялись, так как у wrapper  свойство position:relative, а у footer отрицательный отступ (margin). Добавим свойство position со значением relative к футеру чтобы уровнять приоритеты.

Приоритеты z-index по умолчанию расставляются сверху вниз, если какой-то блок меняет свойство position: static, то приоритет меняется и этот блок становится выше по невидимой оси z, контент будет залезать под  футер , теперь зададим блоку  .block-empty высоту :

Вместо блока  block-empty можно использовать также  просто wrapper:after.