Исследование высоты BODY

Небольшое исследование поведения элемента BODY в различных браузерах. Отступы от границ окна (margin, padding). Высота BODY и ее изменение в зависимости от высоты контента в Internet Explorer 6, Firefox 1.5, Opera 8.

Для исследования возьму минимальный XHTML-документ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>body research</title>

<style type="text/css"><!--
body {
background:#fff;
color:#333;
}
//--></style>

</head>
<body>

<div id="allPage"> </div>

</body>
</html>

Определение типа документа: XHTML1.1. IE6, FF1.5, Opera8 отображают этот документ в режиме соответствия стандартам (Standards mode). К этому документу подключена таблица стилей для определения фона страницы и цвета текста.

В теле документа один блочный элемент DIV id="allPage". Для начала определю ему цвет фона, отличный от установленного для BODY. Добавлю в CSS: #allPage {background:lightblue; color:inherit;}. Теперь этот DIV виден в окне браузера.

Настройки браузера по умолчанию. Отступы.

В окне браузера наблюдаются отступы от границ окна до границ элемента DIV.

рис.1 рис.1
<style type="text/css"><!--
body {
background:#fff;
color:#333;
}
#allPage {
background:lightblue;
color:inherit;
}
//--></style>

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

  • IE 6 - сверху: 15px, справа: 10px, снизу: неизвестно, слева: 10px;
  • FF 1.5 - сверху: 8px, справа: 8px, снизу: неизвестно, слева: 8px;
  • Opera 8 - сверху: 8px, справа: 8px, снизу: неизвестно, слева: 8px;

Добавлю фон для всего документа:
html {background:#FFB55F;}.

рис.2 рис.2
<style type="text/css"><!--
html {
background:#FFB55F;
}
body {
background:#fff;
color:#333;
}
#allPage {
background:lightblue;
color:inherit;
}
//--></style>

Теперь разница более заметна: вокруг DIV в Opera белая рамка шириной 8px (судя по цвету, это BODY), а в IE и FF размеры отступов остались прежними, но приобрели цвет фона всего документа(похоже, BODY не больше DIV). Установлю для BODY margin:0.

рис.3 рис.3
<style type="text/css"><!--
html {
background:#FFB55F;
}
body {
margin:0;
background:#fff;
color:#333;
}
#allPage {
background:lightblue;
color:inherit;
}
//--></style>

В IE и FF отступы исчезли, DIV вплотную прижат к верхней, правой и левой границам окна, в то время, как в Opera ничего не изменилось.

А теперь заменю в CSS установленный для BODY margin:0 на padding:0.

рис.4 рис.4
<style type="text/css"><!--
html {
background:#FFB55F;
}
body {
padding:0;
background:#fff;
color:#333;
}
#allPage {
background:lightblue;
color:inherit;
}
//--></style>

Предположения подтвердились. Отступы в IE и FF - margin элемента BODY, а в Opera - padding.

Оставлю для дальнейшего исследования BODY в CSS margin:0 и padding:0.

Вывод: эти отступы различны в упомянутых браузерах не только по размерам, но и по сути. BODY по умолчанию занимает не все окно, его высота зависит от содержимого.

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

Установлю в CSS высоту BODY в пикселях, например, height:200рх. Для продолжения экспериментов уменьшаю ширину элемента DIV до width:50% и центрирую его по горизонтали с помощью margin:0 auto.

рис.5 рис.5
<style type="text/css"><!--
html {
background:#FFB55F;
}
body {
height:200рх;
margin:0;
padding:0;
background:#fff;
color:#333;
}
#allPage {
width:50%;
margin:0 auto;
background:lightblue;
color:inherit;
}
//--></style>

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

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

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

рис.6 рис.6
<style type="text/css"><!--
html {
background:#FFB55F;
}
body {
height:200рх;
margin:0;
padding:0;
background:#fff;
color:#333;
}
#allPage {
height:300px;
width:50%;
margin:0 auto;
background:lightblue;
color:inherit;
}
//--></style>

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

рис.7 рис.7
<style type="text/css"><!--
html {
background:#FFB55F;
}
body {
/* height:200рх; */
margin:0;
padding:0;
background:#fff;
color:#333;
}
#allPage {
height:300px;
width:50%;
margin:0 auto;
background:lightblue;
color:inherit;
}
//--></style>

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

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

рис.8 рис.8
<style type="text/css"><!--
html {
background:#FFB55F;
}
body {
height:100%;
margin:0;
padding:0;
background:#fff;
color:#333;
}
#allPage {
height:300px;
width:50%;
margin:0 auto;
background:lightblue;
color:inherit;
}
//--></style>

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

рис.9 рис.9
<style type="text/css"><!--
html {
height:100%;
background:#FFB55F;
}
body {
height:100%;
margin:0;
padding:0;
background:#fff;
color:#333;
}
#allPage {
height:300px;
width:50%;
margin:0 auto;
background:lightblue;
color:inherit;
}
//--></style>

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

рис.10 рис.10
<style type="text/css"><!--
html {
height:100%;
background:#FFB55F;
}
body {
height:100%;
margin:0;
padding:0;
background:#fff;
color:#333;
}
#allPage {
height:900px;
width:50%;
margin:0 auto;
background:lightblue;
color:inherit;
}
//--></style>

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

Заменяю height:100% для BODY на min-height:100%; и ситуация меняется на противоположную. Теперь FF и Opera при минимальной высоте DIV растягивают BODY до высоты видимой части окна, а при увеличении контента и появлении вертикального скроллинга - до высоты содержимого. IE6 не знает о свойстве min-height, поэтому высота BODY в обоих случаях равна высоте содержимого, т.е. DIV.

рис.11 рис.11
<style type="text/css"><!--
html {
height:100%;
background:#FFB55F;
}
body {
/* height:100%; */
min-height:100%;
margin:0;
padding:0;
background:#fff;
color:#333;
}
#allPage {
height:900px;
width:50%;
margin:0 auto;
background:lightblue;
color:inherit;
}
//--></style>

Добавляю height:100% для BODY. FF и Opera снова растягивают его до 100% высоты видимой части страницы и не более того. А IE растягивает BODY до 100% высоты видимой части страницы при минимальной высоте DIV, а при ее превышении видимой области окна браузера - до высоты содержимого.

рис.12 рис.12
<style type="text/css"><!--
html {
height:100%;
background:#FFB55F;
}
body {
height:100%;
min-height:100%;
margin:0;
padding:0;
background:#fff;
color:#333;
}
#allPage {
height:900px;
width:50%;
margin:0 auto;
background:lightblue;
color:inherit;
}
//--></style>

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

рис.13 рис.13
<style type="text/css"><!--
html {
height:100%;
background:#FFB55F;
}
body {
height:auto !important;
height:100%;
min-height:100%;
margin:0;
padding:0;
background:#fff;
color:#333;
}
#allPage {
height:900px;
width:50%;
margin:0 auto;
background:lightblue;
color:inherit;
}
//--></style>

Выводы: HTML всегда занимает всю высоту окна браузера. Для управления высотой содержимого следует определить высоту HTML в CSS height:100%. IE игнорирует правило !important и свойство min-height, поэтому для него работает height:100%, тогда как height:auto !important маскирует в FF и Opera height:100%.

CSS, что получилось.

Для достижения результата, представленного на последнем рисунке, CSS будет, например таким:


<style type="text/css"><!--
 html {
  height:100%;
}
 body {
  margin:0;
  padding:0;
  height:auto !important;
  height:100%;
  min-height:100%;
}
//--></style>

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



Много комментариев (43) к “Исследование высоты BODY”

  1. онаним :

    отоличная статья! хорошо разжёвано!


    2005-12-13 at 11:42 am
  2. AlexWhite :

    Хорошая работа. :)
    СПАСИБО!
    Жаль, что не все браузеры не используют стандарты :(


    2005-12-13 at 1:15 pm
  3. krik :

    Мне статься тоже очень понравилось. Особенно тот момент, что все наглядно, понятно и нет научных терминов.

    Молодцы.


    2005-12-13 at 8:38 pm
  4. pepelsbey :

    Очень плавно и последовательно пройден путь к истинам, которые общеизвестны как аксиомы. Отлично ;)

    Только удивил спец-эффект при наведении на первую картинку… точнее его необходимость.


    2005-12-14 at 12:57 pm
  5. alex13th :

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


    2005-12-23 at 5:08 pm
  6. Баранов Андрей :

    alex13th, что именно из статьи Вы применили и какой результат ожидали?


    2005-12-23 at 5:14 pm
  7. alex13th :

    я применил полученный в результате исследования код:

    ожидал я растяжения содержимого во всю высоту экрана. но никаких изменений не произошло.


    2005-12-23 at 5:58 pm
  8. alex13th :

    для наглядности проблемы, скажу, что ваши рекомендации я применил относительно http://www.somix.ru


    2005-12-23 at 6:05 pm
  9. Баранов Андрей :

    alex13th, укажите для body border:solid 1px red; чтобы убедиться, что именно body у Вас растянуто на всю высоту окна(www.somix.ru). Нигде кроме html и body более высота не указана. Поэтому ничто больше и не растягивается.


    2005-12-23 at 6:25 pm
  10. alex13th :

    спасибо!!!


    2005-12-23 at 6:33 pm
  11. oxyum :

    СПАСИБО!!!
    Больше сказать ничего не могу, ибо это то, что именно сейчас я собирался делать! :)


    2006-02-04 at 9:25 pm
  12. Мария :

    Спасибо за статью, наполовину она решила мою проблему.
    Но.
    http://andalucia.ru – если раньше в ФФ и Опере8 фон просто улетал вверх, за пределы экрана (в ИЕ и Опере 7.23 всё нормально), то теперь фон прилепляется в нижний правый угол
    Например, http://andalucia.ru/about.html – это некрасиво, при прокрутке фон уползает вверх по экрану. А хотелось бы, чтобы фонбыл в самом низу, в зависимости от высоты контента.
    Помогите, пожалуйста.


    2006-02-05 at 12:36 am
  13. Баранов Андрей :

    Для Мария:

    Кажется проблема уже решена?


    2006-02-09 at 10:12 pm
  14. Ike Novodvorsky :

    Не описана проблема со странным поведением iexlorer 6, при выставлении атрибута height: 100% для html и body появляется полоса прокрутки в два окна, зотя содержимое без этих атрибутов занимало меньше одного. Появляется пустое пространство.


    2006-02-19 at 6:20 pm
  15. locker :

    А не могли бы подсказать, какможно блок растянуть на 100 процентов по вертикали, чтобы в Opera это работало?

    Т.е. допустим не для body указать height:100%, а для #main допустим? А то вOpera получается что он блок тянет по высоте контента. По моему это наиболее частаяпроблема, скоторой можно столкнуться, если допустим конетента на сайте нет


    2006-02-26 at 11:43 pm
  16. AKS :

    [b]locker[/b]
    Старый, добрый height: 100% не подходит?


    2006-02-27 at 11:39 am
  17. locker :

    :) Уже подходит. Оказывается надо просто было его для body еще указать :-D


    2006-02-27 at 11:54 am
  18. Andrey :

    Как заставить в FF растинуться таблицу на весь экран?

    Untitled Page

    html
    {
    height:auto !important;
    min-height:100%;
    height:100%;
    }
    body
    {
    background:red;
    color:#333;
    margin:0;
    padding:0;
    height:auto !important;
    min-height:100%;
    height:100%;

    border:solid 2px green;
    }


    2006-03-02 at 4:03 pm
  19. Баранов Андрей :

    html {
    height:100%;
    }
    body {
    margin:0;
    padding:0;
    height:100%;
    }
    table {
    height:auto !important;
    height:100%;
    min-height:100%;
    width:100%;
    }

    правда при этом body останется =100% высоты окна в случае увеличения количества контента и появления вертикального скроллинга


    2006-03-02 at 5:06 pm
  20. Chameleon :

    Спасибо! Очень познавательно и наглядно.


    2006-03-09 at 7:03 pm
  21. Den :

    при полученном css для FF и оперы получается body height:auto
    и следовательно дочерний div с height: 120% не будет тянуться вообще..

    body research

    html {
    height:100%;
    }
    body {
    margin:0;
    padding:0;

    height:100%;
    min-height:100%;
    }

    #allPage {
    background:lightblue;
    color:inherit;
    width:50%;
    margin:0 auto;
    height: 120%;
    }

     


    2006-03-09 at 11:00 pm
  22. Egoroff :

    Балин круто — то что искал… Итак респект ;)


    2006-03-28 at 12:14 am
  23. hamal :

    Да, все верно. Но остается один момент, при котором высота body все равно работает некорректно.

    Итак:

    html { width:100%; height:100%; }
    body { position:relative; width:100%; min-height:100%; height:auto !important; height:100%; }
    #parent { position:relative; width:100%; min-height:100%; height:auto !important; height:100%; }
    #middle { padding-bottom:140px; }
    #footer { position:absolute; bottom:0; width:100%; height:140px; }

    Так вот, все везде впорядке, кроме Firefox до 1.5, и естессно в Mozilla до 1.7.13
    В этих браузерах, при большом контенте в #middle, скажем две-три 100% величины, footer не прибивается к низу, а висит в воздухе, причем после каждого refresh’а по-разному… о как!


    2006-05-12 at 11:21 am
  24. hamal :

    Почему-то теги не запостились…
    Исправляю:

    [body]
    [div id="parent"]

    [div id="middle"]
    собсна контент
    [/div]
    [div id="footer"]
    собсна подвал
    [/div]

    [/div]
    [/body]


    2006-05-13 at 9:44 am
  25. Святослав :

    Потрясающе. Провести такое исследование. Многое стало понятно, как будто разложили по полочкам.


    2006-05-26 at 4:33 pm
  26. KUZEN :

    Классная статья, всё очень наглядно и понятно, огромный респект автору.


    2006-07-11 at 1:24 am
  27. LehaS :

    вопрос конечно глупый, но хотел узнать – чем отличаеться “html” от “body”?


    2006-08-16 at 1:22 pm
  28. Валентин Коваленко :

    На основе данного исследования попробовал решить классическую проблему с прижатием футтера к низу окна, судите сами, что вышло: http://vk.osvita.org.ua/footer.htm

    Отдельную статью писать к сожалению не когда, сдаю проект. Если увидите грабли, пишите буду искать причину.


    2006-08-26 at 7:40 pm
  29. Валентин Коваленко :

    … пишите на мыло valentin.kovalenko#bigmir.net

    (сорри, не нашел как пост редактировать)


    2006-08-26 at 7:52 pm
  30. forexrain :

    В иследовании упущено иследование на border.
    Добавьте в стиль для body и html
    body, html
    {
    border: 0;
    }
    И вы увидете что по умолчанию, border у всех браузеров разный
    так что для достижения одинакового результата для html и body не забывайте и про border.


    2006-10-21 at 5:55 pm
  31. Ник :

    Господи! Когда же все браузеры будут одинаковые??!!


    2007-04-11 at 1:07 pm
  32. Temasik :

    Только тогда, когда W3C издаст стандарты, а не рекомендации…


    2007-06-05 at 12:02 pm
  33. Миха :

    что за белая полоска сверху??? не понимаю откуда она и куда?


    2007-06-24 at 2:17 am
  34. bvn :

    А у меня добавление min-height: 100% в body дает появление вертикального скрола даже там, где контент помещается… мне это не понравилось, зато без него работает, как надо все… это в Файрфоксе, точнее Айсвиселе (Дебиан).


    2007-09-13 at 4:59 pm
  35. Serge :

    как можно говорить о вёрстке, если сайт свёрстан отвратительно.
    в опере всё слопнулось в кучу!


    2007-09-25 at 4:01 pm
  36. Azazello :

    Вроде все работает, но, в FF если насильно сжимать окно по вертикали, когда появлется скрол background остается в середине страницы, а не прижимается к полу… что делать с этим не подскажите?


    2007-12-20 at 3:18 pm
  37. Bruno :

    Просто супер!


    2007-12-29 at 6:40 pm
  38. Александр :

    У меня не выходит, и так как этот метод не применим для div’ов, которые вложены в дивы юез указания точной длины, так как height: 100%; при этом не имеет ни какого действия, а зачастую ситуация такая, что приходится растягивать div, который не вложен ни в один div с точно указанной высотой…


    2008-02-18 at 9:02 pm
  39. Роберт :

    Снимаю шляпу! Мир много бы потерял без людей капающих так глубоко;)


    2008-03-09 at 12:33 am
  40. CAHTEXHuK :

    Исследование конечно хорошее и полезное, но на практике, если не прописывать атрибуты бэкграунда для html, то он берет их из body. А для всего остального можно просто: html, body {height: 100%;}. Или я ошибаюсь?


    2008-05-22 at 7:07 pm
  41. mihdan :

    Статья отличная – очень долгое время использую ваши наработки и ни разу не напоролся на косяки! Огромная вам благодарность – так держать


    2008-06-19 at 6:59 pm
  42. mihdan :

    CAHTEXHuK, офигенно ошибаетесь, вы вообще читали статью? Пробовали воспроизвести все, что описано?


    2008-06-19 at 7:00 pm
  43. DeAn :

    Огромное спасибо за статью! У самого все руки никак не доходили так капитально все проверить.


    2008-06-20 at 10:21 am

22 queries 0.326 seconds.