Html 绝对 DIV 高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2177116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute DIV height 100%
提问by woody993
I have been working on this for the past couple of hours, and searching the web and stackoverflow hasn't been much support. How do I make #gradientand #holesfill the entire page?
过去几个小时我一直在研究这个，搜索网络和 stackoverflow 并没有得到太多支持。如何制作#gradient和#holes填充整个页面？
I have used the Inspect Element feature in Safari, and when I highlight the body element it does not fill the entire window.
我在 Safari 中使用了 Inspect Element 功能，当我突出显示 body 元素时，它并没有填满整个窗口。
HTML:
HTML：
<body>
<div id="gradient"></div>
<div id="holes"></div>
<div id="header">Header Text</div>
</body>
CSS:
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;
}
采纳答案by prodigitalson
Well it looks to me that your element with all the content is floated. If it is then its not going to expand the body unless it is cleared.
好吧，在我看来，您的包含所有内容的元素都是浮动的。如果是，那么它不会扩大身体，除非它被清除。
回答by Adam
Note that the heightproperty specified in percentageis calculated with the respect to the containing block..which doesn't necessary have to be the immediate ancestor – "The containing block for a positioned box is established by the nearest positioned ancestoror, if none exists, the initial containing block". I bet this is what's going on in the questioner's case as there is no positioned ancestor (the one with position:set either to relativeor absolute).
请注意，以百分比形式指定的高度属性是相对于包含块计算的……它不一定是直接祖先—— “定位框的包含块由最近的定位祖先建立，或者，如果没有存在，初始包含块"。我敢打赌，这就是提问者的情况，因为没有定位的祖先（设置为或 的祖先）。position:relativeabsolute
So the "containing block" resolves to the initial containing blockwhich corresponds with the dimensions of the viewport (window). Setting position:relativeto bodywill take the body's height into account and stretch the absolutely positioned content along bodycompletely.
因此，“包含块”解析为与视口（窗口）尺寸相对应的初始包含块。设置position:relative为body将考虑body的高度并完全拉伸绝对定位的内容body。
回答by Doug Hamlin
I was having the same issue. Fixed it by changing position: absolute to position: fixed.
我遇到了同样的问题。通过将 position: absolute 更改为 position: fixed 来修复它。
回答by Gabriele Petrioli
[update]
new approach
This should do it ..
[更新]
新方法
这应该这样做..
using display:tableon your 2 elements should do it (it works in my tests). (but you wil have to assign width values now..
使用display:table你的2个元素应该这样做（这在我的测试工作）。（但您现在必须分配宽度值..
However i am not sure if you should define nested elements as table-cell etc.. which would become unmanageable..
但是我不确定您是否应该将嵌套元素定义为表格单元格等......这将变得无法管理......
Have a try though ..
试试吧..
old non working version旧的非工作版本
你有没有试过
#gradient#gradient和#holes#holes下面？#gradient {
height:auto!important;
height:100%;
min-height:100%;
..
..
}
#holes{
height:auto!important;
height:100%;
min-height:100%;
..
..
}
回答by beacks
$('div.class').css({'height':(($(document).height()))+'px'});
回答by sabansaulic
The best way is to use javascript. min-height is not supported by every browser.
最好的方法是使用javascript。并非每个浏览器都支持 min-height。
Javascript using prototype:
使用原型的Javascript：
<script type="text/javascript">
var height = $(document.body).getHeight();
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>');
</script>
回答by Pete B
Have you tried setting up like this?
你试过这样设置吗？
#holes {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Will stretch the element to fill the whole page area
将拉伸元素以填充整个页面区域
回答by Francisco Aquino
I think you did it right. This is working in Chrome (WebKit too!) and in IE7/8/Quirks whenever you put width: 100% on #gradient and #holes, can't test safari on Mac right now (only have it at home) but in theory you should be seeing it properly.
我认为你做对了。这在 Chrome（也有 WebKit！）和 IE7/8/Quirks 中工作，只要你在 #gradient 和 #holes 上设置 width: 100%，现在无法在 Mac 上测试 safari（只能在家里使用）但理论上你应该正确地看到它。
That said, maybe this is a doctype thing, try different ones?
也就是说，也许这是一个文档类型的东西，尝试不同的？
回答by woody993
To be honest, I think I'm just going to overflow:autoon my content so that the entire page does not need to be scrolled
老实说，我想我只是要overflow:auto处理我的内容，这样就不需要滚动整个页面
回答by Amresh Raut
Apply the CSS styles to both #gradient & #holes & put the script after your DIV.
将 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>
