Set height 100% on absolute div

html css absolute
Nworks picture Nworks · Jan 8, 2013 · Viewed 128.6k times · Source

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

Pete picture Pete · Jan 8, 2013

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

Related questions

Position: absolute and parent height?

I have some containers and their children are only absolute / relatively positioned. How to set containers height so their children will be inside of them? Here's the code: HTML <section id="foo"> <header>Foo</header&…

Read More
How to center absolute div horizontally using CSS?

I've a div and want it to be centered horizontally - although I'm giving it margin:0 auto; it's not centered... .container { position: absolute; top: 15px; z-index: 2; width:40%; max-width: 960px; min-width: 600px; height: 60px; overflow: hidden; background: #fff; margin:0 auto; }

Read More
How to center div vertically inside of absolutely positioned parent div

I am trying to get blue container in the middle of pink one, however seems vertical-align: middle; doesn't do the job in that case. <div style="display: block; position: absolute; left: 50px; top: 50px;"> <div style="text-align: …

Read More