具有 display:table 样式的嵌套 div 在 IE 中不会拉伸到 100% 高度
Posted
技术标签:
【中文标题】具有 display:table 样式的嵌套 div 在 IE 中不会拉伸到 100% 高度【英文标题】：Nested divs with display:table style are not strech to 100% height in IE 【发布时间】：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。
【问题讨论】：
【参考方案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;
【讨论】：
以上是关于具有 display:table 样式的嵌套 div 在 IE 中不会拉伸到 100% 高度的主要内容，如果未能解决你的问题，请参考以下文章