使用Javascript將DIV高度設置爲100％導致跨瀏覽器問題

Question

無論內容如何，​​我都需要側邊欄div和內容div，其高度始終爲容器高度的100％。當窗口大小改變時，容器大小發生變化。我不能使用背景來僞造效果。我必須爲IE6設計，並決定使用Javascript來嘗試並提出一個跨瀏覽器的解決方案。

基本上，被加載頁面時，一個函數查找容器的offsetHeight，減去報頭的offsetHeight，並將側欄和內容div等於結果的style.height。

由於IE6中的無限循環錯誤，我必須實現一個函數來檢查窗口是否實際調整大小。

它工作在FF（事實上，我得到了我想要的FF沒有任何JavaScript在所有的效果，但我離題...）的罰款，但在IE6內容div實際上增加大小在每個調整事件。它的高度增加了6個像素。

編輯：我想補充一點，當增加窗口的大小時，代碼實際上工作正常，但是在減小窗口的大小時不能。

下面是小提琴的鏈接：Here

的JavaScript：

var setup = { 
viewWidth: undefined, 
viewHeight: undefined, 
newViewWidth: undefined, 
newViewHeight: undefined, 
resizeTimeout: undefined, 

findView: function() { 
    if (typeof window.innerWidth != 'undefined') { 
     viewWidth = window.innerWidth; 
     viewHeight = window.innerHeight; 
    } 

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
     viewWidth = document.documentElement.clientWidth; 
     viewHeight = document.documentElement.clientHeight; 
    } 
}, 

windowCheck: function() { 

    setup.findView(); 

    if (setup.viewWidth != setup.newViewWidth || setup.viewHeight != setup.newViewHeight) { 
     setup.resizeTimeout = window.setTimeout(setup.onResize, 10); 
    }; 


}, 

onResize: function() { 
    var head = document.getElementById("viewportheader").offsetHeight; 
    var content = document.getElementById("container").offsetHeight; 



    document.getElementById("listing").style.height = content - head + 'px'; 
    document.getElementById("viewport").style.height = content - head + 'px'; 

    document.getElementById("tester2").innerHTML = content; 
    document.getElementById("tester").innerHTML = content - head; 


    setup.newViewWidth = document.documentElement.clientWidth;; 
    setup.newViewHeight = document.documentElement.clientHeight; 

    window.clearTimeout(setup.resizeTimeout); 
} 
}; 


function start() { 
    setup.onResize(); 
    window.onresize = resize; 

} 

function resize() { 
    setup.windowCheck(); 
} 

window.onload = start; 

Answer 1

編輯：這裏有一個更簡單的解決方案！

使用要計算高度的元素（#viewportheader, #container），只需將其溢出屬性設置爲隱藏（overflow: hidden;）即可。這將使他們忽略其子級的大小，並只調整其父寬度/高度。

- 替代的解決方案 -

onResize: function() { 
    // You need to reset the heights before you do your calculations 
    document.getElementById("listing").style.height = '0px'; 
    document.getElementById("viewport").style.height = '0px'; 

    var head = document.getElementById("viewportheader").offsetHeight; 
    var content = document.getElementById("container").offsetHeight; 


    document.getElementById("listing").style.height = content - head + 'px'; 
    document.getElementById("viewport").style.height = content - head + 'px'; 

    document.getElementById("tester2").innerHTML = content; 
    document.getElementById("tester").innerHTML = content - head; 

    // IE uses offsetWidth/Height, you'll need to check for this 
    setup.newViewWidth = document.documentElement.offsetWidth; 
    setup.newViewHeight = document.documentElement.offsetHeight; 

    window.clearTimeout(setup.resizeTimeout); 
} 

有跡象表明，測試後實際一起添加到 的幾個問題，你只有一個問題產生在IE6這個問題。

當div的寬度或高度達到100％時，它也會考慮到它的孩子。如果說，文檔的寬度是以100px計算的，並且div的寬度設置爲100％，那麼div的計算寬度也是100px。但是，如果您將其子設置爲100px，則將文檔大小調整爲80px，即使div的寬度設置爲100％，它仍將保持爲100px，而不會調整爲80px。這是因爲它的孩子大於80px，因此div會調整大小以適合孩子。