height 100% doesn't work, two divs inside div

Answer 1

The example below illustrates how to assign 100% height or width to a div contained inside other divs

HTML Code:

<div class="container">
<div class="span5 fill">
Hello World
</div>
</div>

CSS Code:

html,body{height:100%;}

.container {
     height:100%;
}

.fill{
   width:100%;
   height:100%;
   min-height:100%;
   background-color:#990000;
   padding:10px;
   color:#efefef;
}

Answer 2

<div style="min-height:40px; height:150px; border:solid 1px black; float:left;">
    <div style="border:solid 1px black; height:100%; float:left;">
    Your text 1
    </div>

    <div style="border:solid 1px red; height:100%; float:left;">
    Your text 2
    </div>
</div>

• The reason is you didn't put exact height (150px) for the first .
• One more thing, you have already put exact height for th first height, you only need to height = 100% for inside tags.

Here is the result: http://jsfiddle.net/4JgA4/117/

Answer 3

if you want to set 100% height of any element you have to set the 100% to its parent element as well. Here is good explanation on how to do it with working example - http://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php

Answer 4

It doesn't get the full height because the original container has no height. So 100% of nothing is still nothing.

If you give the parent div a height, then the 100% will take effect.

As seen here: http://jsfiddle.net/4JgA4/115/

<div style="min-height:40px; border:solid 1px black; float:left; height:150px;">
    <div style="border:solid 1px black; height:150px;  float:left;">
    First to set height
    </div>

    <div style="border:solid 1px red; height:100%; float:left;">
    Why don't get the 100%
    </div>
</div>

Answer 5

try to give height something 300px to parent div and see the result as you expected

<div style="min-height:40px; height:300px; border:solid 1px black; float:left;">
        <div style="border:solid 1px black; height:150px; float:left;">
        First to set height
        </div>

        <div style="border:solid 1px red; height:100%; float:left;">
        Why don't get the 100%
        </div>
    </div>

See here

Answer 6

as stated in other answers, the 100% don't work unless the parent height is also specified.

looks like you are trying to achieve 'equal column height', you don't have to set the parent height for that. using CSS table layout can be helpful here.

notice how clean this styling is. no floating elements, and no need to specify the same height again and again in different elements.

look at this Fiddle

best practice: separate your styling from your markup.

HTML:

<div id="Parent">
      <div>
       First to set height
      </div>
      <div>
      Why don't get the 100%
    </div>
</div>

CSS:

#Parent
{
    display: table;
}
#Parent > div
{
    display: table-cell;
    border: 1px solid black;
}
#Parent > div:first-child /*if you want to fixed the first column height*/
{
    height: 150px; /*or any other fixed height you want*/
}