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 :)
try adding
position:relative
to your body styles. Whenever positioning anything absolutely, you need one of the parent containers to be positioned relative as this will make the item be positioned absolute to the parent container that is relative.
As you had no relative elements, the css will not know what the div is absolutely position to and therefore will not know what to take 100% height of
The accepted answer is great. Just want to point out some things for others coming here. Margins are not necessary in these cases. If you want a centered layout with a specific "Margin", you can add them to the right and left, like so:
.stretched {
position: absolute;
right: 50px; top: 0; bottom: 0; left: 50px;
margin: auto;
}
This is extremely useful.
As a bonus, absolute centering which can be used to get extremely simple centering:
.centered {
height: 100px; width: 100px;
right: 0; top: 0; bottom: 0; left: 0;
margin: auto;
position: absolute;
}
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;
}
Another solution without using any height but still fills 100% available height. Checkout this e.g on the codepen. http://codepen.io/gauravshankar/pen/PqoLLZ
For this html and body should have 100% height. This height is equal to the viewport height.
Make inner div position absolute and give top and bottom 0. This fills the div to available height. (height equal to body.)
html code:
<head></head>
<body>
<div></div>
</body>
</html>
css code:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
position: relative;
}
html {
background-color: red;
}
body {
background-color: green;
}
body> div {
position: absolute;
background-color: teal;
width: 300px;
top: 0;
bottom: 0;
}
Instead of using the body, using html worked for me:
html {
min-height:100%;
position: relative;
}
div {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
Source: Stackoverflow.com