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;
}

Are you able to use javascript/jquery for this? if so, that's proabably a reasonable way to achieve this functionality. — Ed James, Feb 01 '10 at 14:20
Why not just set their heights to something obscene then? If they stick to the top of the page anyway then it shouldn't be an issue ! — Ed James, Feb 01 '10 at 14:49
Which Safari version? I don't have Mac, but I can't reproduce this at any (recent) browser at my Windows XP dev machine, including Safari 4.0.4. — BalusC, Feb 01 '10 at 15:06

Adam · Answer 1 · 2013-03-04T23:52:41.720

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.

More on containing block here.

score 17 · Answer 2 · answered Dec 14 '12 at 17:28

17

I was having the same issue. Fixed it by changing position: absolute to position: fixed.

answered Dec 14 '12 at 17:28

Doug Hamlin

996
1
11
17

Developing a mobile menu and this worked for me better than previous answers. – Sethen Jul 01 '13 at 16:33
Dude! Been searching how to solve this for a whole day! This was it! Thanks a lot! – acdcjunior Jan 10 '14 at 17:54
This worked for me as well. Was searching for an answer for hours! Should be accepted as best answer. – kaplanmaxe Feb 05 '16 at 18:41

Gabriele Petrioli · Answer 3 · 2010-02-01T14:48:20.387

3

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

edited Feb 01 '10 at 14:48

answered Feb 01 '10 at 14:32

Gabriele Petrioli

191,379
34
261
317

yes .. i posted without checking .. it will only work for the overflowing element .. (the one whose content will go beyond the bottom of the viewport..) – Gabriele Petrioli Feb 01 '10 at 14:40

score 3 · Accepted Answer · answered Feb 01 '10 at 14:57

3

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.

answered Feb 01 '10 at 14:57

prodigitalson

60,050
10
100
114

I think he might have it, totally missed that as the css for the content box wasn't posted! – ghoppe Feb 01 '10 at 15:34

score 2 · Answer 5 · edited Jan 11 '12 at 06:24

2

$('div.class').css({'height':(($(document).height()))+'px'});

edited Jan 11 '12 at 06:24

sra

23,820
7
55
89

answered Nov 05 '10 at 05:33

beacks

31
1

score 1 · Answer 6 · answered Feb 01 '10 at 14:22

1

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>

answered Feb 01 '10 at 14:22

sabansaulic

459
2
5
10

I'm not sure writing the div into the page directly is the best idea: why not use $('#divName).css('height', height) instead [or the prototype equivalent]? – Ed James Feb 01 '10 at 14:26
No need to use javascript. If you must have compatibility with IE6 (blech!) since IE < 6 treats height incorrectly as min-height, it's better to use the star html hack: * html #gradient { height:100%; } – ghoppe Feb 01 '10 at 14:33
Least amount of visitors will be using windows, if any. – woody993 Feb 01 '10 at 14:35

score 1 · Answer 7 · answered Feb 01 '10 at 15:49

1

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

answered Feb 01 '10 at 15:49

Pete B

1,709
18
11

score 0 · Answer 8 · answered Feb 01 '10 at 14:39

0

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?

answered Feb 01 '10 at 14:39

Francisco Aquino

9,097
1
31
37

Tried XHTML 1.1, 1.0 Transitional, 4.01 Transitional – woody993 Feb 01 '10 at 14:46

score 0 · Answer 9 · answered Feb 01 '10 at 14:55

0

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

answered Feb 01 '10 at 14:55

woody993

639
1
11
25

score 0 · Answer 10 · answered Mar 23 '15 at 10:00

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>

score -1 · Answer 11 · answered Feb 01 '10 at 14:07

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.

Absolute DIV height 100%

11 Answers11