Issue
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
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;
}
Answered By – ashley
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0