Hai DIV bên trong DIV. Làm thế nào để tự động điền vào không gian của cha mẹ DIV bởi DIV thứ hai?

Question

Vui lòng truy cập this fiddle để xem ý tôi là gì -

Tôi có DIV gốc, trong đó có hai DIV được đặt theo thứ tự thẳng đứng. DIV hàng đầu chỉ nên có chiều cao nội dung của nó, trong khi DIV dưới cùng nên chiếm giữ tất cả không gian còn lại của DIV phụ thuộc vào chiều cao nội dung và cũng không được chồng chéo DIV gốc.

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

Nói tóm lại, "nội dung" nên chiếm tất cả các không gian còn lại của "bên ngoài" DIV, không chồng chéo.

Bất kỳ ý tưởng nào về cách đạt được điều này?

Bất kỳ trợ giúp nào về điều này được đánh giá cao.

Answer 1

Thêm display:table; để div phụ huynh và display:table-row; cho con divs

Và height:0 để div đứa con đầu lòng. Này có chiều cao tự động

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

Một CSS cách mới sẽ được sử dụng 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>