Высота страницы на 100% очень часто становится неотъемлемым требованием к разработке дизайна. Решение из этой статьи подойдет для тех, у кого дизайн сайта не терпит, когда на странице слишком мало контента и футер оказывается в подвешенном состоянии. Для тех, кому необходимо, чтобы футер был прижат к низу страницы.
Причиной всему является то, что высота страницы определяется контентом и не растягивается на 100%, если контента недостаточно для заполнения всего пространства. Даже если указать контейнеру, в котором находится контент, высоту равную 100%, то ничего не выйдет.
Дело в том, что высота родительского контейнера наследуется от дочернего, если не указана иная. Поэтому, указав контейнеру высоту равную 100%, мы лишь указываем, что он будет иметь высоту 100% от родительского блока, в данном случае BODY, а тот в свою очередь от HTML.
Как это работает?
Для исправления этой ситуации, необходимо в Ваш файл CSS добавить следующий набор стилей:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
* { padding: 0; margin: 0; } html, body { height: 100%; } /* главный контейнер */ div#container { min-height: 100%; } /* это нужно для IE */ * html #container { height: 100%; } |
Здесь мы указываем, что теги HTML и BODY должны иметь высоту 100%. Да, всё верно, проблема была именно в них. Как только Вы зададите им высоту 100%, всё сразу же встанет на свои места.
Что же касательно контейнера, то ему достаточно указать свойство min-height. Оно позволит растянуть контейнер в случае, если контент выходит за пределы окна браузера.
Помимо всего этого, не забываем про старые версии браузера IE, которые не понимают свойство min-height.
Комментарии
Здесь еще никто не оставлял комментарии.