CODEWITHSUNDEEP
htmlcss
user3339454
user3339454

Reputation: 117

div height not 100% of parent's height

I'm making a website and I have a information part on the left of the wrapper. the wrappers height is set to 100% and my left div for the info is set to 100%, but the height isn't 100%, it's auto, how can I make it so my left div height is equal to my wrapper div height?

CSS:

#wrapper {
    background:url(../images/wrap_bg.png);
    width: 1240px;
    min-height:100%;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
}
#wrapper #left {
    width:295px;
    height:100%;
    min-height:100%; 
    border-right: 1px dotted #fefbfb; 
    padding: 0 0 0 10px;
    float: left;
}

Html:

<div id="wrapper">
    <div id="left">some text</div>
</div>

This is somewhat of what I have http://jsfiddle.net/xD96D/

Upvotes: 1

Views: 906

Answers (2)

Jeroen
Jeroen

Reputation: 16865

You can only set the height to 100% if the parent's height is either also set to 100%, either set to a static value, like 100 pixels.

Have a look at Hashem Qolami's answer. He did a better job explaining the problem as well posted up an example.

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99554

A percentage value for min-height is relative to the height of the containing box and #wrapper element (the container) doesn't have an explicit height value.

Hence the 100% value for min-height property of the left div is calculated to 0.

From the MDN

min-height

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.

You should use height: 100% for the parent to get min-height: 100% to work for the children.

WORKING DEMO.

Upvotes: 2

Related Questions