高度：可滚动页面上的100％

Question

我正在创建一个博客页面，我需要一个DIV来获取所有可用宽度和高度的100％。

当我尝试使用Height : 100%时，DIV只占用可见区域。因此，如果屏幕分辨率为1920x1080，网站大小为900x16000 ......高度：100％仅提供1080。在发布之前我已经看到了很多答案，但还没有设法让它发挥作用。

CSS：

#parent
{
    position : absolute;
    background: green;        
    height : 100%;
    width : 100%;
}
.child
{
   position: relative;
    float:left;
   background: red;
   height : 400px;
   width : 500px;
   border : 1px solid yellow;
   margin: 10px 10px 10px 10px;
}

HTML：

<div id="parent">
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
</div>
​

看看这个JSFiddle：http://jsfiddle.net/acJVw/21/ 我需要的是绿色区域占用所有可用空间，直到（可滚动）页面的最底部。 编辑：

修改 我必须稍微改变一下这个问题，因为答案正在使用我提供的示例，但没有使用渐变背景。这是一个带有渐变和最小高度的新JSFiddle： http://jsfiddle.net/acJVw/27/

渐变不会一直到页面底部但只是停止！

Answer 1

使用min-height而不是height。因此它占用内容的空间，即使它比可见屏幕更大。看一下这个fiddle

<div id="parent">
<div class="child"> Some text </div>
<div class="child"> Some text </div>
<div class="child"> Some text </div>
<div class="child"> Some text </div>
</div>

和css

 #parent
{
position : absolute;
background: green;        
min-height : 100%;
width : 100%;
}
.child
{
position: relative;
float:left;
background: red;
height : 100px;
width : 500px;
border : 1px solid yellow;
margin: 10px 10px 10px 10px;
}

修改：如果您的内容大于屏幕宽度，那么您也可以尝试

  

最小宽度：100％;

问题编辑后 您的渐变正在停止，因为您未在fiddle中使用最小高度：100％ 试试这个fiddle

Answer 2

尝试;

在我的屏幕上需要100％？

   <style>
* {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#parent
{
    position : absolute;
    background: green;        
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;

}
.child
{
   position: relative;
   float:left;
   background: red;
   height : 100px;
   width : 500px;
   border : 1px solid yellow;
   margin: 10px 10px 10px 10px;
}
​
</style>

<div id="parent">
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
</div>