CODEWITHSUNDEEP
htmlcss
tomsseisums
tomsseisums

Reputation: 13377

100% height body, absolute child to also take 100%

I'm trying to make an absolute positioned element to take 100% height of body, where body is set to take 100% of content, that might exceed window height. But, I cannot seem to nail it.

CSS:

html
{
    height: 100%;
}

body
{
    min-height: 100%;
}

#push
{
    padding-top: <to exceed window height>;
}

#absolute
{
    position: absolute;

    left: 0px;
    top: 0px;

    width: 100%; /* to take full width of body */

    height: 100%; /* to take full height of body */
}

HTML (assuming that this is all the content within <body>):

<div id="push"></div>
<div id="absolution"></div>

Fiddle: http://jsfiddle.net/psycketom/DbV4R/

I have tried to make #absolute first child of body, last child (assuming that DOM hasn't yet calculated height at the start of body). Also, tried removing it's height property in exchange of top: 0; bottom: 0; - no luck.

Well, I assume it's because of absolute takes element out of document's flow, but, isn't there a way around it?

My actual example is where I want to have an absolute positioned background attachment element that holds numerous absolutely positioned elements. The element is going to have overflow: hidden to not make any scrollbars.

What options do I have here, except javascript and defined height?

Update:

If you inspect fiddle, you'll notice that #absolution takes 536px in height, where body takes 600.

I want, #absolution, to also take 600px - full height of body.

Upvotes: 0

Views: 561

Answers (1)

Huangism
Huangism

Reputation: 16448

Make the body position relative? Remove native margin/padding for body to get rid of all the red (http://jsfiddle.net/DbV4R/6/)

http://jsfiddle.net/DbV4R/5

body {
    position: relative;
}

Upvotes: 2

Related Questions