Menu
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 :)
327
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.
If you want to set the height of a <div> or any element, you should set the height of <body> and <html> to 100% too.
With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
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
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
