Как получить высоту элемента тела

Здесь общая высота всех <div> составляет 900 пикселей, но функция jQuery возвращает высоту тела как 577 пикселей. (Если я удаляю тело CSS, он работает).

Есть ли решение этой проблемы?

$j(function() {
    alert($j("body").height());
})

html, body {
    height:100%;
}

<div style="height:200px">header</div>
<div style="height:500px">content</div>
<div style="height:200px">footer</div>

Ответ 1

Set

html { height: 100%; }
body { min-height: 100%; }

вместо height: 100%.

Результат jQuery верен, потому что вы установили высоту тела на 100% и, вероятно, высоту окна просмотра. Эти три DIV вызывали переполнение, потому что в элементе BODY недостаточно места для них. Чтобы понять, что я имею в виду, установите границу тега BODY и проверьте, где граница заканчивается.

Ответ 2

Просто используйте

$(document).height() // - $('body').offset().top

и/или

$(window).height()

вместо $('body').height();

Ответ 3

$(document).height(), кажется, делает трюк и дает общую высоту, включая область, которая видна только с помощью прокрутки.

Ответ 4

Я верю, что возвращаемая высота тела - это видимая высота. Если вам нужна общая высота страницы, вы можете обернуть ваши теги div в содержащем div и получить высоту этого.

Ответ 5

Мы пытались избежать использования специфического IE

$window[0].document.body.clientHeight

И выяснилось, что следующий jQuery не будет последовательно давать одно и то же значение, но в конечном итоге в какой-то момент нашего сценария загрузки страницы, который работал для нас и поддерживал кросс-браузерную поддержку:

$(document).height()