•  24-09-2019
  •  | 
  •  

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.
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;
}
Was it helpful?

Solution

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.

OTHER TIPS

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.

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

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

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

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>

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

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?

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

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>

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top