Div 100％的高度適用於Firefox，但不適用於IE

Question

我有一個容器div，它有兩個內部div; 兩者都應在容器內取100％寬度和100％高度。

我將兩個內部div設置為100％高度。 這在Firefox中運行良好，但在IE中，div不會伸展到100％高度，而只會伸展到其中文本的高度。

以下是我的樣式表的簡化版本。

#container
{
   height: auto;
   width: 100%;
}

#container #mainContentsWrapper
{
   float: left;

   height: 100%;
   width: 70%;
   margin: 0;
   padding: 0;
}


#container #sidebarWrapper
{      
   float: right;

   height: 100%;
   width: 29.7%;
   margin: 0;
   padding: 0;
}

有什么我做錯了嗎？ 或者我錯過了任何Firefox / IE怪癖？

Answer 1

我認為“在Firefox中工作正常”僅在Quirks模式渲染中。 在標准模式渲染中，在Firefox中也可能無法正常工作。

百分比取決於“包含塊”，而不是視口。

CSS規范說

百分比是根據生成的框的包含塊的高度計算的。 如果未明確指定包含塊的高度（即，它取決於內容高度），並且此元素未絕對定位，則該值將計算為“auto”。

所以

#container { height: auto; }
#container #mainContentsWrapper { height: n%; }
#container #sidebarWrapper { height: n%; }

手段

#container { height: auto; }
#container #mainContentsWrapper { height: auto; }
#container #sidebarWrapper { height: auto; }

要拉伸到視口高度的100％，您需要指定包含塊的高度（在本例中，它是#container）。 此外，您還需要指定body和html的高度，因為初始Containing Block是“UA依賴”。

所有你需要的是...

html, body { height:100%; }
#container { height:100%; }

Answer 2

很難給你一個很好的答案，沒有看到你實際使用的HTML。

您是否正在使用標准模式渲染輸出doctype？ 實際上沒有能夠查看html repro，這將是我對firefox和Internet Explorer之間的html解釋差異的第一個猜測。

Answer 3

我不確定你要解決的是什么問題，但是當我有兩個並排的容器需要相同的高度時，我在頁面加載上運行一個小的javascript來找到兩者的最大高度並明確地將另一個設置為同樣的高度。 在我看來，高度：100％可能僅僅意味着“使其成為完全包含內容所需的大小”，而你真正想要的是“同時制作最大內容的大小”。

注意：如果頁面上發生任何更改高度的事情，您需要再次調整它們的大小 - 例如驗證摘要可見或可折疊菜單打開。

Answer 4

當我將容器的邊距設置為0時，我已經成功地使其工作：

#container
{
   margin: 0 px;
}

除了你所有的其他風格

Answer 5

您可能必須放入以下一項或兩項：

html { height:100%; }

要么

body { height:100%; }

編輯：哎呀，沒注意到他們被漂浮了。 你只需要浮動容器。

Answer 6

我做了一些與'tvanfosson'所說的非常相似的事情，即實際上使用JavaScript通過onresize等事件不斷監視窗口中的可用高度，並使用該信息相應地更改容器大小（如像素而不是百分比）。

請記住，這確實意味着JavaScript依賴，並且它不如CSS解決方案那么順利。 您還需要確保JavaScript函數能夠在所有主流瀏覽器中正確返回窗口維度。

如果之前提到的CSS解決方案之一有效，請告訴我們，因為這聽起來是解決問題的更好方法。

Answer 7

我不認為IE支持使用auto來設置高度/寬度，所以你可以嘗試給它一個數值（就像Jarett建議的那樣）。

此外，它看起來不像你正在清理你的花車。 嘗試將此添加到#container的CSS中：

#container {
    height:100%;
    width:100%;
    overflow:hidden;
    /* for IE */
    zoom:1;
}

Answer 8

試試這個..

#container
{
   height: auto;
   min-height:100%;
   width: 100%;
}

#container #mainContentsWrapper
{
   float: left;

   height: auto;
   min-height:100%
   width: 70%;
   margin: 0;
   padding: 0;
}


#container #sidebarWrapper
{      
   float: right;

   height: auto;
   min-height:100%
   width: 29.7%;
   margin: 0;
   padding: 0;
}