HTML и Body не занимают весь браузер - проблема HTML5?

Question

Я понятия не имею, что я делаю неправильно, но по какой-то причине у меня возникает ошибка с моей разметкой, из-за которой мой элемент body и html не занимают весь видовой экран в браузере.

Я не могу до конца разобраться. Сначала он поднял голову, когда я попытался добавить пурпурную рамку размером 10 пикселей на верх и низ моего тела.

Если вы осмотрите страницу в Firebug, вы увидите, что существует огромный кусок страницы, который не выделяется при наведении указателя мыши на элемент html или body. И рамка, которую я применил внизу, висит на странице очень далеко.

Кто-нибудь знает, почему это так? Может ли это быть связано с моим использованием HTML5?

Вот эта страница: http://electricorangecreative.com/test/index.html

А вот мои таблицы стилей: http://electricorangecreative.com/test/reset.css http://electricorangecreative.com/test/style.css

Answer 1

Используйте метод липкого нижнего колонтитула .

Answer 2

Я посмотрел текущую тестовую страницу и похоже, что единственная нерешенная проблема - это вертикальная полоса прокрутки, которая по-прежнему появляется без необходимости. Простейшее решение этой проблемы - просто удалить любые поля или отступы для элементов, для которых вы установили height:100%. Виновник, которого я опознал, - div#wrapper. Снимите там отступ, и проблема будет решена (по крайней мере, в FF - не тестировалась в других браузерах). Так как отступы добавляются к высоте, вы получаете элемент, который растягивается на 100% по вертикали. Используйте поля для детей вместо заполнения - должно быть хорошо!