css - 使DIV的高度至少为屏幕高度

Question

主要内容 div #page-content-wrapper 的颜色为浅灰色。

如何扩展这个div的高度，使得这个div的底部位于屏幕的底部？ height: 100%; 似乎不起作用。

内容可以增长到超过 1 个视口(viewport)高度，强制垂直滚动是必要的。

CSS

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

Bootply:http://www.bootply.com/kkrDITPGrO

Answer 1

使用height: 100vh ...或者给#wrapper和html, body也height: 100%

对于使用百分比响应高度的元素，其父元素需要高度，如果父元素也使用百分比，则需要一直到 html/body 元素才能计算其高度除 auto 之外的其他内容。

Updated bootply

---

根据评论更新

要使内容能够增长，请使用 min-height: 100vh ...或 min-height: 100% 使用与上面相同的“百分比”原则

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

Updated booply