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

问题描述

请访问这个小提琴以了解我的意思-

我有一个父 DIV，其中有两个按垂直顺序放置的 DIV.顶部 DIV 应仅具有其内容的高度，而底部 DIV 应占据父 DIV 的所有剩余空间，而与内容高度无关，并且不应与父 DIV 重叠.

HTML:

<div class="inner-title">这是我的头衔
<div class="inner-content">内容区

CSS:

html,body{高度:100%；}.外{背景颜色:蓝色；高度:80%；}.inner-title{背景颜色:红色；}.inner-内容{背景颜色:黄色；高度:自动；}

简而言之，内部内容"应占据外部"DIV 的所有剩余空间，不得重叠.

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

对此非常感谢.

解决方案

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

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

 html,body{高度:100%；}.外{背景颜色:蓝色；高度:80%；边框:红色实心2px；显示:表；宽度:100%}.内部标题{背景颜色:红色；显示:表格行；宽度:100%}.内部内容{背景颜色:灰色；显示:表格行；宽度:100%；高度:100%}

演示更新

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.

解决方案

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

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