Nhận chiều cao có thể nhìn thấy của một phần tử thay vì chiều cao thực tế của nó bằng jquery

Question

Bài đăng này có liên quan đến this one. Xin vui lòng xem xét đọc nó là tốt. :-)

Trong bài đăng tôi liên kết đến, tôi đã tìm ra giải pháp cho vấn đề của mình là thay đổi mục tiêu của liên kết nếu chiều cao có thể nhìn thấy của div lớn hơn giá trị của div khác. Trong bố cục của tôi, tất cả các div tôi đang đề cập đến có chiều cao là 1100px. Nhưng đó không phải là những gì tôi muốn nhận được. Tôi muốn kịch bản để có được chiều cao của div mà hiện tại có thể nhìn thấy cho khách truy cập, không phải chiều cao thực sự của nó. Có cách nào để làm điều đó bằng cách sử dụng jQuery?

Cảm ơn trước!

Answer 1

Bọc nội dung của chế độ xem DIV bằng một DIV khác. Nhắm mục tiêu DIV để đọc chiều cao của tất cả các nội dung như vậy:

JQuery: $ ('div # contents'). Height();

Layout:

<div id="viewport"> 
    <div id="contents">...all your div contents...</div> 
</div> 

Hope this helps. Chúc may mắn.

Answer 2

Bạn có phải sử dụng chiều cao cố định 1100px không? Nguyên nhân bạn cũng có thể chỉ định chiều cao tối đa: 1100px; và chiều cao: 100%; Tùy thuộc vào những gì bạn muốn đặt bên trong div bạn tất nhiên có thể có được chiều cao hiện tại bằng cách

$('.divclass').height(); 

Answer 3

Những gì bạn có thể làm là lấy các yếu tố vị trí để phía trên cùng của hộp mẹ của nó và sau đó trừ nó từ cha mẹ chiều cao container. Điều đó sẽ cho bạn chiều cao có thể nhìn thấy của phần tử.

$('#container').height() - $('#overflow').position().top 

Đây là số fiddle hiển thị thông tin này.