通過絕對定位將100％高度容器推出IE瀏覽端口

以下行爲與我在Firefox和Safari中預期的完全相同，但Internet Explorer的解決方案無法實現。通過絕對定位將100％高度容器推出IE瀏覽端口

問題：非IE瀏覽器顯示容器被正確推離視口的兩側。但是，IE在容器上保持嚴格的100％高度（大概基於該容器的父級），而是偏移容器，將其從視口底部推出。

<!DOCTYPE html> 
<html> 
<title>The Splits</title> 
<head> 
<style> 
html, body {margin:0;padding:0;height:100%;} 

html { 
    height:auto; 
    min-height:100%; 
    overflow:hidden; 
    } 

div#container { 
    position:absolute; 
    top:50px; 
    right:20px; 
    bottom:20px; 
    width:290px; 
    max-height:100%; 
    #height:100%; 
    } 

div#one, 
div#two { 
    position:relative; 
    height:50%; 
    overflow:auto; 
    } 

div#one {background-color:lightgreen;} 
div#two {background-color: lightblue;} 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="one">top</div> 
     <div id="two">bottom</div> 
    </div> 
</body> 
</html>

絕對定位的容器可容納兩個50％的高度元素。

要求如下：

容器的定位是任意的，但必須將其推離視區的側面遠離而無需依賴於填充的視口。
當調整視口大小時，容器中兩個元素的高度必須根據百分比值（當前各爲50％）調整大小。
這必須至少在IE 7+和Firefox 3+中運行。
如果這導致「OH DUH！」對我來說，你會盡力避免傷害。

我已經嘗試過HTML和BODY元素上的位置和高度屬性的許多組合，但顯然沒有在IE中找到正確的屬性。

來源

2010-10-13 Mooseboy

您的代碼在IE 8，FF 3.6和Chrome v8中的工作原理完全相同。不過，我不能說早期版本。 – Patches 2011-01-07 21:35:36

這使用一些IE特定的（非標準）代碼來修復IE7的行爲。其他瀏覽器沒有任何變化。

<!DOCTYPE html> 
<html> 
<title>The Splits</title> 
<head> 
<!-- saved from url=(0014)about:internet --> 
<style> 
html, body {margin:0;padding:0;height:100%;} 

html { 
    height:auto; 
    min-height:100%; 
    overflow:hidden; 
    } 

div#container { 
    position:absolute; 
    top:50px; 
    right:20px; 
    bottom:20px; 
    width:290px; 
    max-height:100%; 
    #height:100%; 
    } 

div#one, 
div#two { 
    position:relative; 
    height:50%; 
    overflow:auto; 
    } 

div#one {background-color:lightgreen;} 
div#two {background-color: lightblue;} 
</style> 
<!--[if IE 7]> 
<style> 
div#one, 
div#two { 
    height:expression(((this.parentElement.offsetHeight-70)/2)+'px'); 
} 
</style> 
<![endif]--> 
</head> 
<body> 
    <div id="container"> 
     <div id="one">top</div> 
     <div id="two">bottom</div> 
    </div> 
</body> 
</html>

來源

2010-10-14 00:58:29 Gaurav

這實際上是一個很好的解決方案，我會把它付諸實施。非常感謝你！但是，它不會像Firefox那樣處理父容器（#container），並且它的背景顏色顯示在div＃2下方。雖然這是一個非常實用的解決方案，但我仍然很想知道這是否可以使用通用CSS解決方案解決，或者它是Internet Explorer中的限制還是錯誤？ – Mooseboy 2010-10-15 14:24:21

我不確定你的意思是「一般化」的CSS解決方案。現在我寫標準，然後在條件註釋中修復IE6/IE7。這樣做可以節省時間和精力。至於它是否是一個「bug」，幾乎所有東西都是。如果它幫助你，請「接受」我的答案。謝謝。 – Gaurav 2010-10-16 01:38:53

通過絕對定位將100％高度容器推出IE瀏覽端口

回答

相關問題