具有 display:table 样式的嵌套 div 在 IE 中不会拉伸到 100% 高度答案

【问题标题】：Nested divs with display:table style are not strech to 100% height in IE具有 display:table 样式的嵌套 div 在 IE 中不会拉伸到 100% 高度
【发布时间】：2012-06-28 03:45:45
【问题描述】：

我有一个响应式布局，它在 FireFox、Chrome 和 Opera 中完美运行，但在 IE 中却不行。它在这 3 个现代浏览器中垂直和水平延伸，但在 IE 中没有。它基于display:table css 技术。

这是我的代码：

<div id="container">
    <div id="header"> header header header header header </div>
    <div id="contentWraper">
        <div id="content">
            <div id="columnsWraper">
                <div id="leftPanel">left panel <br /> left panel <br /> left</div>
                <div id="rightPanel">right panel</div>
            </div>
        </div>
    </div>
    <div id="footer">footer</div>    
</div>

CSS：

html, body { height: 100%; background: gray; margin: 0; padding: 0; }
#container { display: table; height: 100%; width: 100%;}
#header { height: 0%; display: table-row;}
#contentWraper  {height: 100%; background: lightgray; display: table-row;}
#content {height: 100%; background: lightgray; display: table; width: 100%;}
#columnsWraper    {height: 100%;  display: table-row;}
#footer { height: 0%; display: table-row;}
#leftPanel { background: wheat; width: 100px;  display: table-cell; }
#rightPanel { background:yellowgreen; display: table-cell; }

http://jsfiddle.net/wftHq/6/

在我使用带有“display:table”样式的嵌套 div 之前，它也可以在 IE 中使用。我不得不使用它，否则“header”只有 100px 宽（“leftPanel”的宽度）。仅在 IE 中“leftPanel”和“rightPanel”不会填充 100% 的高度。有没有办法在 IE 中修复它？有谁知道如何更改我的代码以在 IE 中工作。我试图避免使用 javaScript。

【问题讨论】：

标签： html internet-explorer nested css-tables

【解决方案1】：

不使用“表格样式”并在 IE 上工作：

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<div id="container">
    <div id="header"> header header header header header </div>
    <div id="contentWraper">
        <div id="content">
            <div id="columnsWraper">
                <div id="leftPanel">left panel <br /> left panel <br /> left</div>
                <div id="rightPanel">right panel</div>
            </div>
        </div>
    </div> 
    <div id="footer">footer</div>    
</div> 

</body>

</html>

CSS：

html,body {
    background:gray;
    margin:0;
    padding:0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#container {
    height:100%;
    position:absolute;
    width:100%;
}

#header {
    background:#FF1493;
    top:0;
}

#footer {
    background:#87CEEB;
    bottom:0;
}
#header, #footer {
    position:absolute;
    width: 100%;
    height: 1.5em;
}

#contentWraper {
    position: absolute;
    background: black;
    width: 100%;
    top: 1.5em;
    bottom: 1.5em;
}

#content {
    background:lightgray;
    height:100%;
    width:100%;
}

#leftPanel {
    vertical-align: top;
    background:#F5DEB3;
    width:100px;
    display: inline-block;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
}

#rightPanel {
    background:#9ACD32;
    display: inline-block;
    height: 100%;
    left: 100px;
    right: 0;
    position: absolute;
}

【讨论】：