Question

我的目标是一个居中的内容包装器，可以随时扩展到页面的整个高度。到目前为止，如果所有内容都适合视口，我的CSS就可以工作，但如果没有，那么div会在初始视口高度之后停止。

html, body {
    height:100%;
}

div {
    position: relative;
    width: 200px;
    height: 100%;
    margin: 0 auto 0 auto;
    background-color: #FAA
}

演示1：https://jsfiddle.net/86j3qshr/1/

如果在div标签处省略weight属性，则只要内容溢出视口，它就会起作用。否则div不在全视口高度。

演示2：https://jsfiddle.net/86j3qshr/2/

Answer 1

使用min-height属性而不是height属性。

当您在具有背景的元素上设置height: 100%时，它将具有父元素的高度100%。由于父元素的高度等于视口的高度，因此它不会按预期工作。由于您不希望元素的最大height与视口相同，因此min-height效果会更好。

Updated Example

div {
    position: relative;
    width: 200px;
    min-height: 100%;
    margin: 0 auto;
}

作为旁注，您还可以使用viewport-percentage units：

Example Here

div {
    position: relative;
    width: 200px;
    min-height: 100vh;
    margin: 0 auto;
}

当div不适合视口时，将div保持在全高度

1 个答案: