исследование высоты страницы и блоков

При создании html страниц ширину того или иного объекта обычно указывают явно (в процентах, либо в пикселах), а вот высота довольно часто может менятся в зависимости от содержимого. Широко распространенными задачами, связанными с высотой блока, являются: "прокрутка" скроллинга (scrolling) до определенного места, расположение блока по центру или внизу страницы, позиционирование одного блока относительно другого и т.д. Последняя задача также связана с абсолютным смещением, о котором можно почитать в другой статье. К сожалению CSS здесь не всегда поможет, особенно если присутствует динамика, а вот JavaScript...

высота страницы

Методы для определения высоты объекта window:

Свойство	Описание
innerHeight (innerWidth)	высота клиентской области окна обозревателя
outerHeight (outerWidth)	высота окна обозревателя
screen.availHeight (screen.availWidth)	высота рабочей области экрана в пикселях (исключая высоту панели задач)
screen.height (screen.width)	высота экрана в пикселях
screenY (screenX)	расстояние от верхней границы экрана до верхней границы окна обозревателя
scrollY (scrollX)	прокрутка документа по вертикали
pageYOffset (pageXOffset)	текущая позиция страницы по вертикали относительно верхнего левого угла окна

Надо отметить, что разными браузерами, во-первых, не все свойства поддерживаются, во-вторых, не все значения свойств совпадают. Также не стоит забывать, что это все свойства объекта window, а это значит что они и относятся только к объекту window, то есть нельзя писать document.getElementById(id).innerHeight и т.д. К сожалению, в процессе тестирования (IE 6, FF 2.0, Opera 9.25) было выявлено, что одинаково всеми браузерами поддерживается только window.screen.availHeight и window.screen.height (см. сводную таблицу ниже). Но в подовляющем большинстве случаев этого не достаточно, часто бывает нужно узнать высоту произвольного блока или контейнера, поэтому следует обратиться к другим способам нахождения высоты.

Свойство	Описание
clientHeight (clientWidth)	высота блока без учета скроллинга
scrollHeight (scrollWidth)	высота блока с учетом скроллинга
scrollTop (scrollLeft)	смещение текущей позиции по вертикали относительно верхней границы блока
offsetHeight (offsetWidth)	высота блока с/без(в разных браузерах) скроллинга

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

сводная таблица (эта страница на экране 1280х1024)

Свойство	без DOCTYPE			!DOCTYPE XHTML 1.0 Transitional
Свойство	IE (6)	FF (2.0)	Opera (9.25)	IE (6)	FF (2.0)	Opera (9.25)
window.innerHeight	undefined	807	848	undefined	807	848
window.outerHeight	undefined	979	911	undefined	979	911
window.screen.availHeight	971	971	971	971	971	971
window.screen.height	1024	1024	1024	1024	1024	1024
window.screenY	undefined	-4	-23	undefined	-4	-23
window.scrollY	undefined	изменяется в зависимости от прокрутки	undefined	undefined	изменяется в зависимости от прокрутки	undefined
window.pageYOffset	undefined	изменяется в зависимости от прокрутки	изменяется в зависимости от прокрутки	undefined	изменяется в зависимости от прокрутки	изменяется в зависимости от прокрутки
document.body.clientHeight	846	807	848	3196	3124	3136
document.body.scrollHeight	3252	3202	3166	3196	3124	3136
document.body.scrollTop	изменяется в зависимости от прокрутки	изменяется в зависимости от прокрутки	изменяется в зависимости от прокрутки	0	0	0
document.documentElement.scrollTop	0	0	0	изменяется в зависимости от прокрутки	изменяется в зависимости от прокрутки	изменяется в зависимости от прокрутки
document.body.offsetHeight	850	3192	848	3196	3124	3136
document.getElementById(this_tbl).clientHeight	361	371	361	361	370	361
document.getElementById(this_tbl).scrollHeight	361	371	361	361	370	361
document.getElementById(this_tbl).offsetHeight	361	371	361	361	370	361

Ваш браузер (пример получения значений свойств до полной загрузки страницы, не забудьте нажать refresh)

примечание

Значения в таблице зависят от индивидуальных настроек (toolbar'ов, строки состояния, размера шрифта и т.д.), поэтому могут отличаться от Ваших даже при совпадении версии браузера.

выводы

DOCTYPE влияет на значение описанных выше параметров
при определении высоты экрана всегда можно положиться на window.screen.height
для нахождения высоты видимой части страницы или блока используйте document.getElementById(id).clientHeight, с учетом скроллинга - document.getElementById(id).scrollHeight

Статья отличная!
Казалось бы элементарные вещи, но иногда они забирают уйму времени, особенно при написании кросбраузерного кода.
Хотел писать свою, видать уже не нужно, спасибо автору!

Иван 06.08.08 в 13:37

Да, автор молодец!!! Тоже ищу, ищу) Статься супер!

virua 01.10.08 15:37

Полезный материал. И все вместе.

Arhont 28.12.08 01:23

ПРОСТО СЛОВ НЕТ!!! ЦЕЛИЙ ДЕНЬ мучил выражение if (yp[i] >(doc_height-5+ window.scrollY)) а оно не работало в ИЕ (теперь понятно что нужно document.body.scrollTop) . АВТОРУ ОГРОМНОЕ СПАСИБО

AMBA 21.01.09 10:20

А IE7, chrome, safari уже не нужны никому?

Dima 19.02.09 14:26

ИЕ 7 = кал хром от гугла = ф топку сафари = для маководов, полезно бы описать

Сергей 15.04.09 13:21

спс. давненько не встречал такого изложения материала. приятно читать.

Lebnik 26.07.09 22:45

Отличная статья, однако у всем известного jquery есть $(window).height(), которая тоже весьма правильно определяется размер внутреннего окна для всех браузеров кроме Оперы, а для оперы помогло window.innerHeight, за что спасиб!

George 22.10.10 16:36

Это все фигня, а вот как в табличке строчка "активная" строка подсвечивается вот это интересно?

vadim 23.11.10 22:52

автору респект!!! Класная статья

http://e-kzn.ru 03.09.11 14:05

как в табличке строчка "активная" строка подсвечивается
События onmouseover и onmouseout

row.onmouseover = function() { backlighting( this, true ); }
row.onmouseout = function() { backlighting( this ); }

, функция примерно такая

/*
element - объект TR, столбцы которого будем подсвечивать при наведении мыши
set - true подсветить
*/
function backlighting( element, set )
{
if ( set == null ) set = false;
element.cells[0].style.backgroundColor = set ? '#e4e4e4' : 'transparent';
element.cells[1].style.backgroundColor = set ? '#e4e4e4' : 'transparent';
}

andrey 28.12.11 13:00

ВЕЛИКИЙ РЕСПЕКТ

Если вам помогла или просто понравилась эта статья вы можете отблагодарить автора кликнув по рекламе. Спасибо!

комментировать:

прежде чем писать комментарий убедитесь, пожалуйста, что он не попадает в нижеследующие категории:

не стоит писать "я чайник, помогите ..." или "я начинающий, объясните ..." - уважайте себя! может вы и новичок, но ведь не тупой же! сами вполне способны во всем разобраться, тем более, что материал здесь изложен весьма доступно
не пишите вопросы типа "как мне сделать такую же менюху как наверху?", "куда вставлять этот код?", "как устроен интернет?" и т.д. - уважайте время автора!
комментарии вида "все, что здесь написано - бред" будут оставлены только если будут подписаны "я такой-то, разработчик сайта такого-то с посещаемостью 1000 хостов в день" и т.п. Если вы не согласны с чем-то - обоснуйте, напишите как правильно, а писать простые ругательства не надо, это не забор

прямые оскорбления кого бы то ни было будут удалятся!
здоровая критика приветствуется!

от кого: