24

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

我在 Safari 中使用了 Inspect Element 功能，当我突出显示 body 元素时，它不会填满整个窗口。
替代文字

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;
}
4

11 回答 11

38

请注意，以百分比指定的高度属性是相对于包含块计算的..它不一定是直接祖先 - “定位框的包含块由最近的定位祖先建立，或者，如果没有存在，初始包含块"。我敢打赌，这就是提问者的情况，因为没有定位的祖先（设置为或的祖先）。position:relativeabsolute

因此，“包含块”解析为与视口（窗口）的尺寸相对应的初始包含块。设置position:relative为body将考虑body' 高度并body完全拉伸绝对定位的内容。

更多关于包含块的信息。

于 2011-10-07T13:48:15.687 回答
17

我遇到了同样的问题。通过将位置：绝对更改为位置：固定来修复它。

于 2012-12-14T17:28:37.480 回答
3

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

于 2010-02-01T14:57:18.583 回答
3

[更新]
新方法
这应该可以..

display:table在你的 2 个元素上使用应该可以做到（它在我的测试中有效）。（但是您现在必须分配宽度值..

但是我不确定您是否应该将嵌套元素定义为表格单元格等。这将变得无法管理..

不过试试看..

旧的非工作版本
您是否尝试过#gradient以下#holes内容？

#gradient {
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
#holes{
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
于 2010-02-01T14:32:30.517 回答
2 
$('div.class').css({'height':(($(document).height()))+'px'});
于 2010-11-05T05:33:26.390 回答
1

你试过这样设置吗？

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

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

于 2010-02-01T15:49:04.847 回答
1

最好的方法是使用 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>
于 2010-02-01T14:22:08.617 回答
0

我认为你做对了。每当您在#gradient和#holes上放置width：100％时，这在Chrome（WebKit也是！）和IE7 / 8 / Quirks中都可以使用，现在无法在Mac上测试safari（只能在家里使用）但理论上你应该正确地看到它。

也就是说，也许这是一个文档类型的东西，尝试不同的？

于 2010-02-01T14:39:57.397 回答
0

老实说，我想我只是overflow:auto在我的内容上，这样整个页面就不需要滚动了

于 2010-02-01T14:55:21.383 回答
0

将 CSS 样式应用于 #gradient 和 #holes 并将脚本放在 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>

于 2015-03-23T10:00:18.767 回答
-1

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

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

于 2010-02-01T14:07:31.510 回答