使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

---

更新基于评论

使内容能够成长，用同样的 “百分比” 的原则如上

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

使用 min-height: 100vh ...或 min-height: 100%

Updated booply