2

See css: http://jsfiddle.net/4JgA4/114/

Also here:

<div style="min-height:40px; 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>

Why does the second div doesn't get the 100%?

Michael Blok
  • 221
  • 1
  • 4
  • 15

8 Answers8

3
<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/

Ni Ngo
  • 61
  • 3
2

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>
Kyle Muir
  • 3,875
  • 2
  • 22
  • 27
2

because your parent div does not have property of height with height :100% you should have height:specific height on parent element,but you have min-height ,if the height is dynamic you should use jQuery to do this

Shirin Abdolahi
  • 1,047
  • 8
  • 18
2

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*/
}
avrahamcool
  • 13,888
  • 5
  • 47
  • 58
1

it doesnt get height because the parent div has no height. use below code

<div style="height:150px; border:solid 1px black; float:left;">
    <div style="border:solid 1px black;height:100%;  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>
rash111
  • 1,307
  • 4
  • 19
  • 35
  • 1
    But the parent size is set by the first div, I don't know the height until the first div loads its content – Michael Blok Sep 23 '13 at 10:08
  • as you say that the first div height is not fixed. if yes, then no problem remove height property from all div. – rash111 Sep 23 '13 at 10:54
0

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

Sonu Sindhu
  • 1,752
  • 15
  • 25
0

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

Alex
  • 996
  • 2
  • 10
  • 17
-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;
}
SrishAkaTux
  • 57
  • 3