请访问this fiddle明白我的意思-
我有一个父 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;
}
简而言之,“inner-content”应该占据“outer”DIV 的所有剩余空间,不能重叠。
知道如何实现吗?
对此非常感谢。
最佳答案
添加 display:table;
到父 div 和 display:table-row;
到子 div
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%
}
关于css - DIV 内的两个 DIV。如何通过第二个DIV自动填充父DIV的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17590457/