Question

过去几个小时我一直在研究这个问题，搜索网络和stackoverflow并没有得到太多的支持。如何让#gradient和#holes填满整个页面？

我在Safari中使用了Inspect Element功能，当我突出显示body元素时，它不会填满整个窗口。
alt text http://img534.imageshack.us/img534/9955/screenshot20100201at215.png

HTML：

<body>

    <div id="gradient"></div>
    <div id="holes"></div>

    <div id="header">Header Text</div>
</body>

CSS：

html, body {
    height:100%;

    margin:0;
    padding:0;
}

body {
    background-image:url(../Images/Tile.png);
    background-color:#7D7D7D;
    background-repeat:repeat;
}

#gradient {
    background-image:url(../Images/Background.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    right:0px;
}

#holes {
    background-image:url(../Images/Holes.png);
    background-repeat:repeat;

    position:absolute;
    top:2px;
    left:2px;
    height:100%;
    right:0px;
}

#header {
    background-image:url(../Images/Header.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    width:100%;

    padding-top:24px;
    height:49px; /* 73 - padding */

    color:rgb(113, 120, 128);
    font-family:Helvetica, Arial;
    font-weight:bold;
    font-size:24px;
    text-align:center;
    text-shadow:#FFF 0px 1px 0px;
}

Answer 1

请注意，百分比中指定的 height 属性为calculated with the respect to the containing block ..不一定必须是直接祖先 - "The containing block for a positioned box is established by the nearest positioned ancestor or, if none exists, the initial containing block" 。我打赌这就是提问者的情况，因为没有定位的祖先（position:设置为relative或absolute）。

因此“包含块”解析为initial containing block，它与视口（窗口）的尺寸相对应。将position:relative设置为body会考虑body的身高，并完全沿着body拉伸绝对定位的内容。

More on containing block here.

Answer 2

我遇到了同样的问题。通过改变位置来修正它：绝对到位置：固定。

Answer 3

<强> [更新]
新方法
应该这样做..

在你的2个元素上使用display:table应该这样做（它在我的测试中起作用）。（但你现在必须分配宽度值..

但是我不确定你是否应该将嵌套元素定义为table-cell等...这将变得无法管理..

尝试一下..

<小时/> 旧的非工作版
您是否尝试过以下#gradient和#holes？

#gradient {
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
#holes{
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}

Answer 4

在我看来，所有内容的元素都会浮动。如果是，那么除非它被清除，否则它不会扩展身体。

Answer 5

$('div.class').css({'height':(($(document).height()))+'px'});

Answer 6

最好的方法是使用javascript。每个浏览器都不支持min-height。

Javascript使用原型：

<script type="text/javascript">
var height = $(document.body).getHeight();
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>');
</script>

Answer 7

您是否尝试过这样设置？

#holes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

将拉伸元素以填充整个页面区域

Answer 8

我认为你做得对。这适用于Chrome（WebKit也是！）和IE7 / 8 / Quirks，只要你在#gradient和#holes上放宽度：100％，就不能在Mac上测试safari（只在家里有）但在理论上你应该正确地看到它。

那就是说，也许这是一个doctype的东西，尝试不同的东西？

Answer 9

说实话，我想我只是在我的内容上overflow:auto，所以不需要滚动整个页面

Answer 10

将CSS样式应用于#gradient＆amp; #holes＆amp;将脚本放在你的DIV之后。

.background-overlay{
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

<body>
    <div id="gradient"></div>
    <div id="holes"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            var bodyHeight = $("body").height();
            $('#gradient,#holes').height(bodyHeight);

        })
    </script>


    <div id="header">Header Text</div>

Answer 11

如果我没记错的话，为了能够指定容器（A）子容器（B1，B2，...）的位置，它的位置应该是绝对的。您的body容器的位置不是。

我想你应该将position:absolute;属性添加到html,body选择器。

绝对DIV高度100％

11 个答案: