Nworks Nworks - 5 months ago 46
CSS Question

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 :)

Answer

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