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

Question

Здесь общая высота всех <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>

Answer 1

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

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

и / или

$(window).height()

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

Answer 2

Установить

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

вместо height: 100%.

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

Answer 3

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

Answer 4

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

$window[0].document.body.clientHeight 

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

$(document).height()

Answer 5

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