1

我正在创建一个博客页面，我需要一个 DIV 来占用所有可用宽度和高度的 100%。 在此处输入图像描述

当我尝试使用Height : 100%时，DIV 只占用可见区域。所以，如果屏幕分辨率是 1920x1080，网站是 900x16000 大.... Height: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/

渐变不会一直到页面底部，而是停止！

4

2 回答 2

2

使用最小高度而不是高度。即使它比可见屏幕大，它也会占用内容的空间。看看这个小提琴

<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%；

问题编辑后 您的渐变正在停止，因为您没有在小提琴中使用 min-height:100% 试试这个小提琴

于 2012-12-26T18:37:48.173 回答
1

尝试;

在我的屏幕上它需要 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>
于 2012-12-26T18:30:59.453 回答