我有一个内容面板,用作可滚动内容的视口。该视口必须始终拉伸到其父级的整个宽度和高度。我网站其余部分的布局使我需要将父级设置为display:table-cell。这在Firefox和Chrome中工作正常,但IE不遵守height:100%规则。这是我的代码:
<body>
<div class="wrapper">
<div class="content">
<main>
<div class="article-wrapper">
<article id="home">
<h1>This is the home page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quae ipsa dolor quidem ipsum, repudiandae maiores ad aliquam in necessitatibus incidunt. Quibusdam alias beatae temporibus culpa, esse ipsam, rem ducimus.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quae ipsa dolor quidem ipsum, repudiandae maiores ad aliquam in necessitatibus incidunt. Quibusdam alias beatae temporibus culpa, esse ipsam, rem ducimus.</p>
</article>
</div>
</main>
</div>
</div>
</body>
CSS:
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
main {
background-color: rgba(0, 0, 0, 0.85);
}
.content {
display: table;
}
.wrapper {
position: relative;
height: 100%;
}
.content {
width: 1060px;
position: absolute;
padding: 140px 0 200px 0;
height: 100%;
top: 0;
left: 50%;
margin-left: -530px;
}
main {
width: 742px;
padding: 2em;
position: relative;
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
main .article-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
background-color: red;
}
main .article-wrapper article {
background-color: purple;
width: 100%;
height: 100%;
overflow-y: auto;
}
JS小提琴:https://jsfiddle.net/Inigo/r0cujj6x/
这在Firefox和Chrome中可以正确显示,但是在我测试过的所有版本的IE(从IE9-IE11(最新))中,紫色框不会填充红色容器。
如何获得紫色的
article
以拉伸到正确的高度?谢谢。编辑:我也尝试将
article
设置为position:absolute
和top:0, right:0, bottom:0 left:0
,但无济于事;高度仍无法正确显示。 最佳答案
将position: relative
添加到您的main .article-wrapper
(only for IE)
并从padding
元素中删除main
。
这是一个有效的小提琴:https://jsfiddle.net/gregmatys/r0cujj6x/1/