Высота страницы на 100% с помощью CSS

Высота страницы на 100% очень часто становится неотъемлемым требованием к разработке дизайна. Решение из этой статьи подойдет для тех, у кого дизайн сайта не терпит, когда на странице слишком мало контента и футер оказывается в подвешенном состоянии. Для тех, кому необходимо, чтобы футер был прижат к низу страницы.

Причиной всему является то, что высота страницы определяется контентом и не растягивается на 100%, если контента недостаточно для заполнения всего пространства. Даже если указать контейнеру, в котором находится контент, высоту равную 100%, то ничего не выйдет.

Дело в том, что высота родительского контейнера наследуется от дочернего, если не указана иная. Поэтому, указав контейнеру высоту равную 100%, мы лишь указываем, что он будет иметь высоту 100% от родительского блока, в данном случае BODY, а тот в свою очередь от HTML.

Как это работает?

Для исправления этой ситуации, необходимо в Ваш файл CSS добавить следующий набор стилей:

Здесь мы указываем, что теги HTML и BODY должны иметь высоту 100%. Да, всё верно, проблема была именно в них. Как только Вы зададите им высоту 100%, всё сразу же встанет на свои места.

Что же касательно контейнера, то ему достаточно указать свойство min-height. Оно позволит растянуть контейнер в случае, если контент выходит за пределы окна браузера.

Помимо всего этого, не забываем про старые версии браузера IE, которые не понимают свойство min-height.

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
4,00 / 5 баллов
2 участников
Комментарии

Здесь еще никто не оставлял комментарии.

Добавить комментарий

* - поля обязательные для заполнения. E-mail не публикуется.