Есть ли у кого альтернатива html, body height: 100% при прибитии футера к низу?

Question

[Rooly]

Всегда пользуюсь способом прибития футера по принципу

html,body {
   height: 100%
}

Но каждый раз когда я просматриваю свою вёрстку в developer tools, то ужасаюсь своей версткой, а именно то, что высота html и body, меньше размера всей страницы, это можно чётко увидеть, если задать oveflow: hidden, я ещё удивляюсь: как вабще задаётся фоновое изображение, ведь оно накинуто на элемент, который меньше всей страницы, это также можно чётко увидеть по developer tools. Покажите более альтернативный и логический вариант прижатия футера к низу

Comments

[Ильдар Гизетдинов]

Пример на фидл дайте, не очень понятно

[Rooly]

Ильдар Гизетдинов: трудно дать какой-то определенный пример, просто возьмите height: 100% у html,body и посмотрите через devtools высоту html и body, далее сделайте так, чтобы был скроллбар и вы сами увидите, что высота родителя меньше, а высота ребёнка больше. Для наглядности можно сделать oveflow: hidden;

Answer 1

[Ivan Bogachev]

Есть вот такой вариант для прижатия футера. Одна беда - IE не умеет в флексбокс.

Answer 2

[Mr Crabbz]

откройте для себя единицы измерения vw и vh .

Comments

[iBird Rose]

а разница? в данном случае и % и vh, vw будут вести себя одинаково и проблему тс не решат

[Mr Crabbz]

iBird Rose: "что высота html и body, меньше размера всей страницы" - именно вот эту проблему решит min-height: 100vh . Независимо от контента.

[Rooly]

Роман Краббз: Like// ) про min-height не подумал.

Answer 3

[GreatBOND]

Выше меня уже опередили.
Просто напишите контейнеру
height: 100vh;
И он будет занимать всю высоту экрана в любых условиях, на любых устройствах(исключая браузеры неподдерживающие это свойство).

Comments

[Rooly]

не годится, то же самое что и body,html height: 100%. Выше был дан хороший ответ в комментариях.