Two DIVs inside DIV. How to auto-fill the space of

问题:

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.

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.

Any idea of how to achieve this?

Any help on this much appreciated.

回答1:

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

And height:0 to first child div. This takes auto height

    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

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