Высота BODY в процентах
Установлю для . И снова браузеры по разному это показывают. В FF и Opera ничего и не произошло, тогда как IE растянул на всю высоту видимой части окна.
Добавлю для . Теперь во всех трех браузерах одинаково. Казалось бы, на этом можно остановиться.
Но я сделаю высоту несколько больше высоты видимой области окна браузера. Появился вертикальный скроллинг. Внизу страницы видно следующее:
IE снова растянул до высоты содержимого, а FF и Opera оставили его высоту 100% от видимой части страницы.
Заменяю для на и ситуация меняется на противоположную.
Теперь FF и Opera при минимальной высоте растягивают до высоты видимой части окна, а при увеличении контента и появлении вертикального скроллинга — до высоты содержимого.
IE6 не знает о свойстве , поэтому высота в обоих случаях равна высоте содержимого, т.е. .
Добавляю для . FF и Opera снова растягивают его до 100% высоты видимой части страницы и не более того.
А IE растягивает до 100% высоты видимой части страницы при минимальной высоте , а при ее превышении видимой области окна браузера — до высоты содержимого.
Теперь добавляю для и таким образом, поведение его высоты во всех трех браузерах, участвующих в исследовании, становится одинаковым.
Выводы: всегда занимает всю высоту окна браузера. Для управления высотой содержимого следует определить высоту в CSS . IE игнорирует правило и свойство , поэтому для него работает , тогда как маскирует в FF и Opera .
Высота BODY в пикселях
Установлю в CSS высоту в пикселях, например, . Для продолжения экспериментов уменьшаю ширину элемента до и центрирую его по горизонтали с помощью .
На рисунке можно увидеть, что получилось. Теперь можно наблюдать за и одновременно.
Если теперь увеличить высоту , пока она меньше или равна высоте ничего интересного не происходит. Если высота будет установлена 100%, все три браузера посчитают ее относительно высоты .
Различия появляются когда указываемая мной высота станет больше высоты .
Если теперь убрать из CSS высоту , все встает на свои места. Высота становится равной высоте размещенного в нем во всех трех браузерах.
