我有一个响应式布局，它在 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; }
在我使用带有“display:table”样式的嵌套 div 之前，它也适用于 IE。我不得不使用它，否则“header”只有 100px 宽(“leftPanel”的宽度)。 只有在 IE 中“leftPanel”和“rightPanel”不填充 100% 高度。有没有办法在 IE 中修复它？有谁知道如何更改我的代码以在 IE 中工作。我尽量避免使用 javaScript。
最佳答案
不使用“表格样式”并在 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;
}
关于html - 显示 :table style are not strech to 100% height in IE 的嵌套 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11213870/