Css 使DIV的高度至少为屏幕高度

主内容div

#页面内容包装

为浅灰色

如何扩展此分区的高度，使其底部位于屏幕底部<代码>高度：100%似乎不起作用

内容可以扩展到超过1个视口高度，因此必须进行垂直滚动

CSS

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    background: #ddd;
    height: 100%;
}

Bootply：

---

使用

高度：100vh

。。。或者给出

#包装

和

html，正文

也

高度：100%

对于要使用百分比响应高度的元素，其父元素需要一个高度，如果父元素也使用百分比，则需要一直到html/body元素，以便它能够在

auto

之外的其他内容上计算其高度

---

根据评论更新

要使内容能够增长，请使用

最小高度：100vh

。。。或

最小高度：100%

使用与上述相同的“百分比”原则

#page-content-wrapper {
    min-height: 100vh;
    width: 100%;
    position: absolute;
    padding: 15px;
    background: #ddd;
}

---

如果使用position:absolute，则使用coordonates调整内容大小：top:0；+底部：0；最小高度：100vh？@Circuisdei问题是：…这个div的底部在屏幕的底部？我解释为不可增长溢出：那么滚动？看起来这个灰色的容器可能有很多content@circusdei如果出现这个问题，那么是的，但我等待添加，因为我不知道OP想要什么。@kpie否，视口元告诉移动浏览器如何缩放等，而不是

vh

单元是否工作