我正在尝试使容器填满整个页面(或视口,以较大者为准),但遇到了一些麻烦.我正在使用这篇文章中的建议:https://stackoverflow.com/a/17555766,设置<html>和<body>达到100%的高度.
但我注意到.Contentdiv只在<body>高度设置时才填充视口height: 100%,但不是min-height: 100%.这是为什么？为什么不设置它设置时.Content的高度？有没有解决这个问题(没有绝对定位或固定高度)？<body>min-height
HTML
<html>
<body>
<div class="Content">Content</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
/* does not work for .Content: */
min-height: 100%;
/* does work for .Content: */
/* height: 100%; */
background: blue;
}
.Content {
background: red;
min-height: 100%;
}
codepen:http://codepen.io/anon/pen/mJEMVX
PS:当<body>高度设定height: 100%,都min-height: 100%和height: 100%预期的工作.Content.
百分比高度是指height父元素的计算属性.请参阅规格.当只设置min-height: 100%了对body元素按我的答案的链接的问题,该height物业是在其默认值保持不变auto.该min-height属性不会影响该属性的计算值height.
因此,min-height: 100%在您的元素上没有要引用的父高度,因此它将无法工作.一旦你设置height: 100%的上body元素,你的元素能够参考这个高度为自己的百分比高度计算.
如何解决这个问题取决于您尝试实现的布局类型.设置的唯一目的min-height: 100%的上body元件,以允许当内容高度超过导致滚动视口的其膨胀.如果你的内容将永远只能是视口的确切高度,或者你不希望body产生滚动条,这是因为更换简单min-height: 100%与height: 100%上body.