DIV 内有两个 DIV。如何用第二个DIV自动填充父DIV的空间？

请拜访这把小提琴 http://jsfiddle.net/nirmand/HQwLG/明白我的意思 -

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

知道如何实现这一目标吗？

对此的任何帮助都非常感激。

Add display:table;到父 div 和display:table-row;到子div

And height:0到第一个子分区。这需要自动高度

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

演示更新 http://jsfiddle.net/HQwLG/43/