DIV内に2つのDIVがあります。 2番目のDIVで親DIVのスペースを自動入力する方法は？

Question

は、私が何を意味するか見るためにthis fiddleをご覧ください -

を垂直順に配置された2つのdiv要素があることの中に、私は、親DIVを持っています。 上部DIVの内容の高さのみが必要ですが、下部DIVはコンテンツの高さにかかわらず親DIVの残りのスペースをすべて占有し、親DIVと重複しないようにしてください。

HTML：

<div class="outer"> 
    <div class="inner-title"> 
     THIS IS MY TITLE 
    </div> 
    <div class="inner-content"> 
     CONTENT AREA 
    </div> 
</div> 

CSS：短い、 "インナー・コンテンツ" で

html,body 
{ 
height: 100%; 
} 

.outer 
{ 
    background-color:blue; 
    height: 80%; 
} 

.inner-title 
{ 
    background-color:red; 
} 

.inner-content 
{ 
background-color:yellow; 
    height: auto; 
} 

は重複することなく、 "外" DIVのすべての残りのスペースを占有しなければなりません。

どのようにこれを達成するためのアイデアですか？

これについて多くのご支援をいただきました。子供に親のdivに

Answer 1

追加display:table;とdisplay:table-row;は、最初の子のdivに

そしてheight:0をdivを。これは、どのような最小 - の設定について...自動高さ

html,body{ 
    height: 100%; 
} 
.outer{ 
    background-color:blue; 
    height: 80%; border:red solid 2px; 
    display: table; 
    width:100% 
} 
.inner-title{ 
    background-color:red; 
    display:table-row; 
    width:100% 
} 
.inner-content{ 
    background-color:grey; 
    display:table-row; 
    width:100%; 
    height:100% 
} 

DEMO UPDATED

Answer 2

新しいCSSの方法がフレキシボックス

/*QuickReset*/ *{box-sizing:border-box;margin:0;} html,body{height:100%;} 
 

 
.flex-col { 
 
    display: flex; 
 
    flex-direction: column; /* or: flex-flow: column wrap; */ 
 
    height: 100%; 
 
} 
 

 
.flex-fill { /* Add this class to the element you want to expand */ 
 
    flex: 1; 
 
}

<div class="flex-col"> 
 
    <div style="background:red;"> HEADER </div> 
 
    <div class="flex-fill" style="background:yellow;"> CONTENT </div> 
 
    <div style="background:red;"> FOOTER</div> 
 
</div>