绝对DIV高度100％
[英]Absolute DIV height 100%
问题描述
I have been working on this for the past couple of hours, and searching the web and stackoverflow hasn't been much support. 
在过去的几个小时里，我一直在研究这个问题，搜索网络和stackoverflow并没有得到太多的支持。 How do I make #gradient and #holes fill the entire page? 如何让#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;
}
11 个解决方案
解决方案1
38 2011-10-07 13:48:15
Note that the height property specified in percentage is 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 ancestor or, 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 relative or absolute ). 我打赌这就是提问者的情况，因为没有定位的祖先（有position:设置为relative或absolute ）。
So the "containing block" resolves to the initial containing block which corresponds with the dimensions of the viewport (window). 因此“包含块”解析为初始包含块 ，该块与视口（窗口）的尺寸相对应。 Setting position:relative to body will take the body 's height into account and stretch the absolutely positioned content along body completely. 设置position:relative对于body将考虑body的高度并完全沿body拉伸绝对定位的内容。
解决方案2
16 2012-12-14 17:28:37
I was having the same issue. 我遇到了同样的问题。 Fixed it by changing position: absolute to position: fixed. 通过改变位置来固定它：绝对到位置：固定。
解决方案3
3 2010-02-01 14:32:30
[update] [更新]
new approach 新的方法
This should do it .. 这应该做..
using display:table on your 2 elements should do it ( it works in my tests ). 使用display:table你的2个元素上的display:table应该这样做（ 它在我的测试中有效 ）。 (but you wil have to assign width values now.. （但你现在必须分配宽度值..
However i am not sure if you should define nested elements as table-cell etc.. which would become unmanageable.. 但是我不确定你是否应该将嵌套元素定义为table-cell等..这将变得无法管理。
Have a try though .. 试试看..
old non working version
旧的非工作版
Have you tried on
#gradient and #holes the following ?
你有没有试过#gradient和#holes以下？
#gradient { height:auto!important; height:100%; min-height:100%; .. .. } #holes{ height:auto!important; height:100%; min-height:100%; .. .. }
解决方案4
3 已采纳 2010-02-01 14:57:18
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. 如果是，那么除非它被清除，否则它不会扩展身体。
解决方案5
2 2010-11-05 05:33:26
$('div.class').css({'height':(($(document).height()))+'px'});
解决方案6
1 2010-02-01 14:22:08
The best way is to use javascript. 最好的方法是使用javascript。 min-height is not supported by every browser. 每个浏览器都不支持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>
解决方案7
1 2010-02-01 15:49:04
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 将拉伸元素以填充整个页面区域
解决方案8
0 2010-02-01 14:39:57
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上放宽度：100％，就不能在Mac上测试safari（只在家里有）但在理论上你应该正确地看到它。
That said, maybe this is a doctype thing, try different ones? 也就是说，也许这是一个doctype的东西，尝试不同的东西？
解决方案9
0 2010-02-01 14:55:21
说实话，我想我只是要overflow:auto我的内容，这样整个页面就不需要滚动了
解决方案10
0 2015-03-23 10:00:18
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>
解决方案11
-1 2010-02-01 14:07:31
If I remember correctly, in order be able to specify positions of a container's (A) child containers (B1, B2, ...), it's position should be absolute. 如果我没记错的话，为了能够指定容器（A）子容器（B1，B2，...）的位置，它的位置应该是绝对的。 Your body container's position isn't. 你的body容器的位置不是。
I guess you should add the position:absolute; 我想你应该添加position:absolute; property to the html,body selector. 属性为html,body选择器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.