jQuery .height() xuất ra cùng một giá trị như .scrollHeight trên div với overflow: auto (IE8)

Question

Sau khi định tuyến xung quanh nhiều câu hỏi khác, tôi đã không tìm thấy câu trả lời sửa lỗi của tôi.

Tôi đang viết một tập lệnh để tìm hiểu xem div có bị tràn hay không. Nhưng khi cố gắng truy xuất chiều cao hiển thị với jQuery.height(), jQuery.innerHeight() hoặc JavaScripts offsetHeight. Tôi được cung cấp giá trị của toàn bộ div (Bao gồm cả phần bị tràn) tức là: giá trị giống như scrollHeight.

Các DIV chứa phong cách:

{ 
    overflow-x: hidden; 
    overflow-y: auto; 
    width: 73%; 
    bottom: 0px; 
    float: left; 
    height: 100%; 
    top: 0px; 
} 

tôi đã tạo ra một mô hình thành từ các kịch bản trên jsFiddle: http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/ (Hãy chắc chắn để làm cho màn hình xem trước nhỏ hơn để tạo thanh cuộn)

Answer 1

Tất cả mọi thứ có vẻ tốt, jQuery.height() và jQuery.innerHeight() không có gì để làm với thuộc tính tràn. Chúng sẽ trả về chiều cao, không chỉ là phần nhìn thấy được.

Nếu bạn muốn biết chiều cao nội dung bạn phải sử dụng scrollHeight. scrollHeight Đây là một tài sản javascript thường xuyên bạn không cần phải sử dụng jQuery

document.getElementById("wrapper").scrollHeight; 

Hoặc bạn có thể sử dụng jQuery selector

Xem jsfiddle làm việc: http://jsfiddle.net/scgz7an5/1/

ý rằng

$('#wrapper').scrollHeight; 

trả về không xác định.

CẬP NHẬT

Bạn quên phần quan trọng nhất của các yếu tố nổi. Bạn quên xóa chúng.

Hãy xem jsfiddle này, là bản chỉnh sửa của bạn nhưng với các yếu tố nổi bị xóa. Ở đó, bạn thấy các giá trị khác nhau cho scrollHeight và jQuery.height(). Xem rằng .structureContent là thanh có thanh cuộn, không phải .content không phải .width100.

.structureContent có overflow:auto và thanh cuộn bạn thấy xuất phát từ nó.

http://jsfiddle.net/L2bxmszv/5/

Tôi đã thêm lớp này để xóa các phần tử nổi của bạn.

.clearfix:before, 
.clearfix:after, { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; } 
.clearfix:after { 
    clear: both; } 
.clearfix { 
    zoom: 1; } 

Kết quả là thế này:

.content 
324 for scrollHeight 
324 for clientHeight 
324 for jQuery.height() 
.structureContent 
324 for scrollHeight 
276 for clientHeight 
276 for jQuery.height() 

Xem bài viết tuyệt vời về các yếu tố nổi và thanh toán bù trừ chúng ở đây: http://css-tricks.com/all-about-floats/

Answer 2

bây giờ tôi đã tìm thấy một giải pháp cho vấn đề của tôi, mặc dù tôi không hoàn toàn hiểu tại sao nó làm điều này.

Đây không phải là HTML và mã tôi đã viết và tôi chỉ đơn giản viết một bản sửa lỗi để xem thanh cuộn có xuất hiện không. Nhưng tôi thấy rằng việc lấy ScrollHeight và Height của cha mẹ của container đã giải quyết được vấn đề của tôi. So sánh để xem scrollHeight có lớn hơn chiều cao cho phép tôi giải quyết vấn đề hay không.

Answer 3

Thanh cuộn bạn đang xem thực sự ở trên phần tử .structureContent chứ không phải trên .content. Đây là lý do tại sao .content trả về tất cả cùng một giá trị. .content không bị cắt ngắn.