При создании 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) | высота блока с/без(в разных браузерах) скроллинга |
Важное замечание: данные свойства необходимо использовать после полной загрузки страницы, в противном случае значения могут сильно отличаться от реальных. Почему? Подумайте сами…
Ваш браузер (пример получения значений свойств до полной загрузки страницы, не забудьте нажать refresh).
примечание
Значения в таблице зависят от индивидуальных настроек (toolbar’ов, строки состояния, размера шрифта и т.д.), поэтому могут отличаться от Ваших даже при совпадении версии браузера.
выводы
- DOCTYPE влияет на значение описанных выше параметров
- при определении высоты экрана всегда можно положиться на window.screen.height
- для нахождения высоты видимой части страницы или блока используйте document.getElementById(id).clientHeight, с учетом скроллинга — document.getElementById(id).scrollHeight