Cách lấy chiều cao của phần tử cơ thể

Question

Ở đây tổng chiều cao của tất cả <div> là 900 pixel, nhưng hàm jQuery trả về chiều cao của phần thân là 577 pixel. (Nếu tôi xóa CSS cơ thể, nó hoạt động).

Có giải pháp cho vấn đề này không?

$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

Set

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

thay vì height: 100%.

Kết quả trả về jQuery là chính xác, vì bạn đã đặt chiều cao của cơ thể thành 100% và đó có thể là chiều cao của chế độ xem. Ba DIV này đã gây tràn, vì không có đủ khoảng trống cho chúng trong phần tử BODY. Để xem những gì tôi có nghĩa là, thiết lập một biên giới để thẻ BODY và ​​kiểm tra nơi biên giới kết thúc.

Answer 2

Tôi tin rằng chiều cao cơ thể được trả về là chiều cao hiển thị. Nếu bạn cần tổng chiều cao của trang, bạn có thể bọc các thẻ div của bạn trong một div chứa và nhận được chiều cao của nó.

Answer 3

Đơn giản chỉ cần sử dụng

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

và/hoặc

$(window).height() 

thay vì $('body').height();

Answer 4

$ (document) .height() dường như làm các trick và mang lại cho chiều cao tổng thể bao gồm các khu vực chỉ hiển thị thông qua cuộn.

Answer 5

Chúng tôi đang cố gắng tránh sử dụng các trình duyệt IE cụ thể

$window[0].document.body.clientHeight 

Và phát hiện ra rằng jQuery sau đây sẽ không luôn mang lại các giá trị như nhau nhưng cuối cùng làm tại một số điểm trong kịch bản tải trang của chúng tôi mà làm việc cho chúng ta và duy trì hỗ trợ qua trình duyệt:

$(document).height()