Set height 100% on absolute div

I am facing a problem with overlaying a 100% height div. I could use position fixed to solve the cover, but that's not really what I want because you should be able to scroll down on the 'cover' > so people with lower resolutions than mine can see the entire content.

Code example:

HTML

<body>
<div>Overlay example text</div>
</body>

CSS

body {
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: yellow;
}

The problem: The div's height 100% only contains 100% of the webbrowser/viewport, but I want it to cover the entire body.

Thanks in advance :)

Solution 1:

try adding

position:relative

to your body styles. Whenever positioning anything absolutely, you need one of the parent or ancestor containers to be positioned relative (or anything other than the default position of static) as this will make the item be positioned absolute to the ancestor container that is positioned.

As you had no positioned elements, the css will not know what the div is absolutely positioned to and therefore will not know what to take 100% height of

Solution 2:

http://jsbin.com/ubalax/1/edit .You can see the results here

body {
    position: relative;
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background-color: yellow;
}

Solution 3:

Few answers have given a solution with height and width 100% but I recommend you to not use percentage in css, use top/bottom and left/right positionning.

This is a better approach that allow you to control margin.

Here is the code :

body {
    position: relative;
    height: 3000px;
}
body div {

    top:0px;
    bottom: 0px;
    right: 0px;
    left:0px;
    background-color: yellow;
    position: absolute;
}

Set height 100% on absolute div

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts