绝对 DIV 高度 100%
Posted
技术标签:
【中文标题】绝对 DIV 高度 100%【英文标题】：Absolute DIV height 100% 【发布时间】：2011-01-11 17:41:39 【问题描述】：在过去的几个小时里，我一直在研究这个问题，但搜索网络和 *** 并没有得到太多支持。如何让#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 【参考方案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 选择器中。
【讨论】：
以上是关于绝对 DIV 高度 100%的主要内容，如果未能解决你的问题，请参考以下文章