DIV中的两个DIV.如何用第二个DIV自动填充父DIV的空间

Question

请访问这个小提琴看看我的意思-

我有一个父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的所有剩余空间，而不是重叠。

你知道如何做到这一点吗？

非常感谢在这方面的任何帮助。

Answer 1

将display:table;添加到父div，将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%
}

演示更新

Answer 2

一种较新的CSS方式是使用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>