Set height 100% on absolute div
HtmlCssAbsoluteHtml Problem Overview
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 :)
Html Solutions
Solution 1 - Html
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 - Html
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 - Html
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;
}
Solution 4 - Html
Complete stretching (horizontal/vertical)
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.
Centering div (vertical/horizontally)
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;
}
Solution 5 - Html
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;
}
Solution 6 - Html
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;
}