Absolute DIV height 100%
Question
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 #gradient and #holes fill the entire page?
I have used the Inspect Element feature in Safari, and when I highlight the body element it does not fill the entire window.
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;
}
11 answers
solution1
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 ).
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.
solution2
16 2012-12-14 17:28:37
I was having the same issue. Fixed it by changing position: absolute to position: fixed.
solution3
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 ). (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..
Have a try though ..
old non working version
Have you tried on
#gradient and #holes the following ?
#gradient { height:auto!important; height:100%; min-height:100%; .. .. } #holes{ height:auto!important; height:100%; min-height:100%; .. .. }
solution4
3 ACCPTED 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.
solution5
2 2010-11-05 05:33:26
$('div.class').css({'height':(($(document).height()))+'px'});
solution6
1 2010-02-01 14:22:08
The best way is to use javascript. min-height is not supported by every browser.
Javascript using prototype:
<script type="text/javascript">
var height = $(document.body).getHeight();
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>');
</script>
solution7
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
solution8
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.
That said, maybe this is a doctype thing, try different ones?
solution9
0 2010-02-01 14:55:21
说实话，我想我只是要overflow:auto我的内容，这样整个页面就不需要滚动了
solution10
0 2015-03-23 10:00:18
Apply the CSS styles to both #gradient & #holes & put the script after your 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>
solution11
-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. Your body container's position isn't.
I guess you should add the position:absolute; property to the html,body selector.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.