DIV里面有两个DIV。如何自动填充父DIV的空间的第二个DIV？ [英] Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?

问题描述

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

Please visit this fiddle to see what I mean -

我有一个父DIV，有两个DIV按垂直顺序放置。
顶部DIV应该只有其内容的高度，而底部DIV应该占据父DIV的所有空间，而不考虑内容高度，并且也不应该与父DIV重叠。

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

简而言之，inner-content应占据outer DIV，不重叠。

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

有关如何实现这一点的任何想法？

Any idea of how to achieve this?

任何有助于此的帮助。

推荐答案

添加 display：table; 到父div和 display：table-row; 到子div

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

和 height：0 到第一个子div。这需要自动高度

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

这篇关于DIV里面有两个DIV。如何自动填充父DIV的空间的第二个DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！