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

Question

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

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

内容可以增长到超过1个视口高度，迫使垂直滚动是必要的。

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