Сделать тело на 100% высоты браузера

Высота BODY в процентах

Установлю для . И снова браузеры по разному это показывают. В FF и Opera ничего и не произошло, тогда как IE растянул  на всю высоту видимой части окна.

Добавлю для . Теперь во всех трех браузерах одинаково. Казалось бы, на этом можно остановиться.

Но я сделаю высоту  несколько больше высоты видимой области окна браузера. Появился вертикальный скроллинг. Внизу страницы видно следующее:

IE снова растянул  до высоты содержимого, а FF и Opera оставили его высоту 100% от видимой части страницы.

Заменяю  для  на  и ситуация меняется на противоположную.

Теперь FF и Opera при минимальной высоте  растягивают  до высоты видимой части окна, а при увеличении контента и появлении вертикального скроллинга — до высоты содержимого.

IE6 не знает о свойстве , поэтому высота  в обоих случаях равна высоте содержимого, т.е. .

Добавляю  для . FF и Opera снова растягивают его до 100% высоты видимой части страницы и не более того.

А IE растягивает  до 100% высоты видимой части страницы при минимальной высоте , а при ее превышении видимой области окна браузера — до высоты содержимого.

Теперь добавляю  для  и таким образом, поведение его высоты во всех трех браузерах, участвующих в исследовании, становится одинаковым.

Выводы: всегда занимает всю высоту окна браузера. Для управления высотой содержимого следует определить высоту  в CSS . IE игнорирует правило  и свойство , поэтому для него работает , тогда как  маскирует в FF и Opera .

Высота BODY в пикселях

Установлю в CSS высоту  в пикселях, например, . Для продолжения экспериментов уменьшаю ширину элемента до  и центрирую его по горизонтали с помощью .

На рисунке можно увидеть, что получилось. Теперь можно наблюдать за  и  одновременно.

Если теперь увеличить высоту , пока она меньше или равна высоте  ничего интересного не происходит. Если высота  будет установлена 100%, все три браузера посчитают ее относительно высоты .

Различия появляются когда указываемая мной высота  станет больше высоты .

Если теперь убрать из CSS высоту , все встает на свои места. Высота  становится равной высоте размещенного в нем  во всех трех браузерах.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Все про сервера
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: