绝对 DIV 高度 100%答案

【问题标题】：Absolute DIV height 100%绝对 DIV 高度 100%
【发布时间】：2011-01-11 17:41:39
【问题描述】：

在过去的几个小时里，我一直在研究这个问题，但搜索网络和 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;
}

【问题讨论】：

您可以为此使用 javascript/jquery 吗？如果是这样，这可能是实现此功能的合理方式。
没有什么能阻止我，除了我不喜欢它
那为什么不把它们的高度设置为淫秽的东西呢？如果他们仍然停留在页面顶部，那么这应该不是问题！
哪个 Safari 版本？我没有 Mac，但我无法在我的 Windows XP 开发机器上的任何（最近的）浏览器上重现这个，包括 Safari 4.0.4。
Safari Mac 版本 4.0.4

标签： css html height absolute

【解决方案1】：

将 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>

【讨论】：

【解决方案2】：

请注意，percentage 中指定的 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.

【讨论】：

【解决方案3】：

我遇到了同样的问题。通过将 position: absolute 更改为 position: fixed 来修复它。

【讨论】：

开发移动菜单，这对我来说比以前的答案更有效。
老兄！一整天都在寻找如何解决这个问题！就是这样！非常感谢！
这应该是公认的答案，就像一个魅力
这对我也有用。几个小时都在寻找答案！应该被接受为最佳答案。

【解决方案4】：

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

【讨论】：

【解决方案5】：

你试过这样设置吗？

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

我认为他可能拥有它，完全错过了，因为内容框的 css 没有发布！

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

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

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

尽管试一试..

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

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

【讨论】：

是的..我没有检查就发布了..它只适用于溢出的元素..（内容将超出视口底部的元素..）

【解决方案9】：

我认为你做得对。这适用于 Chrome（WebKit 也是！）和 IE7/8/Quirks 中，只要你在 #gradient 和 #holes 上设置 width: 100%，现在无法在 Mac 上测试 safari（只有在家里），但理论上你应该正确地看到它。

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

【讨论】：

试过 XHTML 1.1, 1.0 Transitional, 4.01 Transitional

【解决方案10】：

最好的方法是使用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>

【讨论】：

我不确定直接将 div 写入页面是不是最好的主意：为什么不使用 $('#divName).css('height', height) 代替 [或原型等效项] ?
无需使用javascript。如果您必须与 IE6 兼容（废话！），因为 IE
最少的访问者将使用 Windows，如果有的话。

【解决方案11】：

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

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

【讨论】：