CODEWITHSUNDEEP
cssresponsive-designheight
valerio0999
valerio0999

Reputation: 12138

100% height on nested divs

i have a fixed height wrapper (set by javascript using window.innerHeight) and i have a inifite serie of nested divs generated by the cms i am using. Nested very deeply, there's my webstructure. The problem is, if i add a percentage height to the divs of my webstructure, there's too many blank divs before reaching the wrapper and it just doesn't work. the divs before my webstructure have only dynamic ids, and i can't use them.

I reproduced a very simple example here: http://jsfiddle.net/omegaiori/BXwcP/1/

the html

<div class="wrapper">
<div class="mmm">
    <div></div>
    <div class="him"></div>
</div>

the css

    .wrapper {
    width:500px;
    height:500px;
    background:red;
}
.him {
    width:50%;
    height:50%;
    background:yellow;
}
/* only works if you uncomment this 
.mmm {height:100%}
*/

as stated in the comment, i must give height: 100% to all the nested divs before reaching mine (which should have height 50%).

is there anyway this behaviour can be bypassed?

thanks a lot

Upvotes: 0

Views: 850

Answers (3)

brandonscript
brandonscript

Reputation: 72865

While this is a bit hacky, you could us jQuery (or native javascript) to set the height of the child div after the parent has loaded?

http://jsfiddle.net/remus/BXwcP/3/

$(document).ready(function() {
    $('.him').css("height", $('.wrapper').height() / 2);
});

Upvotes: 0

Mikhail Timofeev
Mikhail Timofeev

Reputation: 2169

div him takes 50% height and width of its parent div, parent div is mmm, it has height and width 0. 50% of 0 is 0.

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240888

When you define an element with a percentage based width/height, the parent's dimensions also needs to be specified.

Setting .him to width:50%, and height:50% is rather useless if the parent's dimensions aren't set. As 50% of 0 is also 0, thus you are not seeing it. In this instance, you would need to set a height/width on the parent, in this case being .mmm.

Since dimensions are already set on .wrapper, you could just use that as the parent. See this jsFiddle here

This would work, assuming you place elements within parents of predefined dimensions. See this jsFiddle.

Upvotes: 2

Related Questions