Как заставить div взять оставшуюся высоту родителя?

Question

JsFiddle Demo

У меня 2 див в контейнере (на самом деле я помечено первый, как h1), и я хотел бы 2-й DIV, чтобы взять оставшееся пространство из его родителей дел. Выполнение height:100% заставляет его использовать 100% от его родительской высоты, заставляя его быть больше, чем родительский, из-за другого div. В демоверсии вы можете увидеть синий проход серый.

Как мне сказать, чтобы использовать оставшуюся высоту? HTML может измениться, но постарайтесь не сходить с ума

HTML:

<div class="outer_box"> 
    <div class="container"> 
     <h1>Title</h1> 

     <div class="box">Box</div> 
    </div> 
    <div class="container"> 
     <h1>Title</h1> 

     <div class="box2">Box</div> 
    </div> 
</div> 

CSS:

.outer_box { 
    height: 500px; 
} 
.container { 
    width: 30%; 
    height: 100%; 
    background-color: grey; 
    float:left 
} 
.box { 
    background-color: blue; 
    height: 100%; 
} 
.box2 { 
    background-color: green; 
} 

Answer 1

Вы можете сделать макет CSS таблицы, и установите box в height:100% нажать название до минимальной высоты.

http://jsfiddle.net/0w7pqeo6/3/

.outer_box { 
 
    height: 300px; 
 
} 
 
.container { 
 
    width: 30%; 
 
    height: 100%; 
 
    background-color: grey; 
 
    float: left; 
 
    display: table; 
 
} 
 
.container h1, .container > div { 
 
    display: table-row; 
 
} 
 
.box { 
 
    background-color: blue; 
 
    height: 100%; 
 
} 
 
.box2 { 
 
    background-color: green; 
 
    height: 100%; 
 
}

<div class="outer_box"> 
 
    <div class="container"> 
 
     <h1>Title</h1> 
 
     <div class="box">Box</div> 
 
    </div> 
 
    <div class="container"> 
 
     <h1>Title</h1> 
 
     <div class="box2">Box</div> 
 
    </div> 
 
</div>

Answer 2

http://jsfiddle.net/utsavoza/9v0dfv39/

HTML часть

Название

<div class="box">Box</div> 
</div> 
<div class="container"> 
    <h1>Title</h1> 

    <div class="box2">Box</div> 
</div> 

CSS

.outer_box { 
height: 500px; 
} 
.container { 
width: 30%; 
height: 100%; 
background-color: grey; 
float:left 
} 
.box { 
background-color: blue; 
height: 84%; 
} 
.box2 { 
background-color: green; 
height: 84%; 
} 

Использование высота 84% вместо 100%. вы можете увидеть его в приведенной выше ссылке ..