Высота содержимого html-окна (не только высота области просмотра) - PullRequest
Новая
       2

Высота содержимого html-окна (не только высота области просмотра)

1 голос
/ 23 марта 2010

Я пытаюсь получить высоту содержимого окна HTML. Это полная высота содержимого, а не видимая высота. Я имел некоторый (очень ограниченный) успех, используя: document.getElementsByTagName('html')[0].offsetHeight в FireFox.

Однако это не работает в IE, а в Chrome - при использовании элементов с абсолютным позиционированием (http://code.google.com/p/chromium/issues/detail?id=38999).

Пример HTML-файла, который можно использовать для воспроизведения этого: 

<html>
    <head>
<style>
div {
    border:solid 1px red;
    height:2000px;
    width:400px;
}
.broken {
    position:absolute;
    top:0;
    left:0;
}
.fixed {
    position:relative;
    top:0;
    left:0;
}
</style>
<script language='javascript'>
window.onload = function () {
    document.getElementById('window.height').innerHTML = window.innerHeight;    
    document.getElementById('window.screen.height').innerHTML = window.screen.height;
    document.getElementById('document.html.height').innerHTML = document.getElementsByTagName('html')[0].offsetHeight;
}
</script>
    </head>
    <body>
        <div class='fixed'>
            window.height: <span id='window.height'>&nbsp;</span> <br/>
            window.screen.height: <span id='window.screen.height'></span> <br/>
            document.html.height: <span id='document.html.height'></span> <br/>
        </div>
    </body>
</html>

Спасибо всем

Гвидо Тапиа

Ответы [ 2 ]

5 голосов
/ 23 марта 2010

Лучшее решение, которое я нашел:

document.documentElement.scrollHeight (scrollWidth для ширины). Энтони выше упомянул, что это может иметь проблемы с особенностями IE, но это подходит для моих целей.

Спасибо

0 голосов
/ 23 марта 2010

Кажется, я помню, что делал что-то подобное раньше. Чтобы было ясно, вы хотите высоту содержимого, которое находится ниже полосы прокрутки, а также то, что на экране, верно?

Вы пробовали использовать jquery? У них есть встроенный метод height(), который будет возвращать вычисленную высоту любого элемента DOM. Таким образом, чтобы получить высоту вашего документа выше и ниже сгиба, вы должны использовать: 

$(document).height();

Чтобы проверить это, вы можете сравнить его с: 

$("body").height();

Еще один быстрый плагин для jquery: если вы попытаетесь сделать это с прямым JS, у вас возникнут проблемы с IE, который не поддерживает те же свойства высоты, что и Firefox и Safari. Так что с jquery это не только упрощает работу, но и позволяет работать с несколькими браузерами.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...