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

Please visit this fiddle to see what I mean -

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

I have a parent DIV, within that there are two DIVs placed in vertical order. The top DIV should have only the height of its content, whereas the bottom DIV should occupy all remain space of the parent DIV irrespective to content heights, and also shouldn't overlap the parent DIV.

我有一个父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;
}

In short, "inner-content" should occupy all remaining space of "outer" DIV, without overlapping.

简而言之,“内部内容”应该占据“外部”DIV的所有剩余空间,而不会重叠。

Any idea of how to achieve this?

知道怎么做到这一点?

Any help on this much appreciated.

任何帮助都非常感谢。

2 个解决方案

#1

Add display:table; to parent div and display:table-row; to child divs

添加显示:表;父div和显示:table-row;给孩子们

And height:0 to first child div. This takes auto 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

#2

A newer CSS way would be using flexbox

一种较新的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>

#1