Absolute DIV height 100%

user_147091 0
Viewed 58557

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.
alt text

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;
}
absolute height css html
11 Answers

[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%;
  ..
  ..
}
user_1281650

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.

user_2159660

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

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

user_2636430

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?

user_1871260

To be honest, I think I'm just going to overflow:auto on my content so that the entire page does not need to be scrolled

user_1470910

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.

xtofl_66100
Related