Dwa DIV wewnątrz DIV. Jak automatycznie wypełnić przestrzeń rodzica DIV przez drugie DIV?

Question

Odwiedź stronę this fiddle, aby zobaczyć, co mam na myśli -

Mam rodzica DIV, w ramach którego są dwa DIV umieszczone w kolejności pionowej. Górny DIV powinien mieć tylko wysokość jego zawartości, podczas gdy dolny DIV powinien zajmować całą pozostałą przestrzeń rodzica DIV niezależnie od wysokości treści, a także nie powinien nakładać się na DIV nadrzędny.

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; 
} 

W skrócie, "wewnętrzny-content" powinna zajmować całą pozostałą przestrzeń "zewnętrznej" div, bez nakładania.

Każdy pomysł, jak to osiągnąć?

Każda pomoc w tym zakresie jest bardzo cenna.

Answer 1

Dodaj display:table; do nadrzędnej div i display:table-row; na dziecko div

I height:0 do pierwszego dziecka div. Dzieje wysokość Auto

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

Nowsza sposób CSS będzie za pomocą schematu flexbox

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