jQuery outerHeight không trả lại giá trị đúng

Question

Tôi đang cố gắng tự động đặt chiều cao của nội dung trang web bằng cách trừ giá trị đầu trang và chân trang khỏi kích thước cửa sổ và đặt nội dung thành giá trị này khi tải tài liệu.

Mỗi tham số hàm lấy một id phần tử để lấy chiều cao phần tử; loại trừ tham số nội dung.

function setH(header, content, footer) 
{ 
    winH = top.innerHeight; 
    winTitle = 32; // height value of the window title (part of the header) 
    headH = $(header).outerHeight(true); 
    footH = $(footer).outerHeight(true); 
    contentH = winH - winTitle - headH - footH; 
    $(content).css({'height' : (contentH) + 'px','overflow-y' : 'scroll'}); 
} 

Vấn đề mà tôi đang gặp phải là giá trị bên ngoàiHãy trả về giá trị sai. Tiêu đề trả về 23px và footer 40px.

Khi kiểm tra các phần tử trong FF và Chrome, các giá trị là 25px và 44px.

Tôi đã thử sử dụng innerHeight ,, outerHeight và outerHeight (true) nhưng không nhận được giá trị chính xác.

Bất kỳ đề xuất nào về những gì có thể xảy ra sai? hoặc một cách khác để thiết lập chiều cao của nội dung động? Tôi đang chạy ra khỏi tóc để kéo để giúp đỡ bất kỳ được đánh giá cao.

Chỉnh sửa: Tôi đang làm việc với nội dung trong iframe. Sau đây: winH = top.innerHeight là nhận được giá trị độ cao của cửa sổ iframe hàng đầu.

Answer 1

Tôi đã sửa đổi tập lệnh tôi sử dụng để tính chiều rộng/chiều cao màn hình. Xem nếu công trình này:

if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerWidth; 
     viewportheight = window.innerHeight; 
     winTitle = 32; 
     headH = $(header).outerHeight(true); 
     footH = $(footer).outerHeight(true); 
     contentH = viewportheight - winTitle - headH - footH; 
    } 

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
     viewportwidth = document.documentElement.clientWidth; 
     viewportheight = document.documentElement.clientHeight; 
     winTitle = 32; 
     headH = $(header).outerHeight(true); 
     footH = $(footer).outerHeight(true); 
     contentH = viewportheight - winTitle - headH - footH; 
    } 

    // older versions of IE 

    else { 

    viewportwidth = document.getElementsByTagName('body')[0].clientWidth; 
    viewportheight = document.getElementsByTagName('body')[0].clientHeight; 
    } 
    document.getElementById("content id").style.height = contentH + "px"; 

Answer 2

Một điều cần cố gắng đó đã giúp tôi là để đặt mã để kiểm tra outerHeight() trong $(window).load() và không $(document).ready(). Rõ ràng trong nhiều trường hợp, bạn có thể sử dụng $(document.ready(), nhưng đôi khi giá trị không chính xác của outerHeight() là do các phần tử không được tải hoàn toàn.