我有一个响应式布局,它在 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。