Html 当潜水器不动时，将其保持在全高'；不适合视口

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

html, body {
    height:100%;
}

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

演示1：

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

html, body {
    height:100%;
}

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

---

演示2:

使用

minheight

属性，而不是

height

属性

当您在具有背景的元素上设置

height:100%

时，它将具有父元素的

100%

高度。由于父元素的高度等于视口的高度，因此无法按预期工作。由于您不希望元素的最大

高度

与视口相同，因此

最小高度

效果更好

作为旁注，您还可以使用：

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