Html DIV 中的两个 DIV。如何通过第二个DIV自动填充父DIV的空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17590457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?
提问by Nirman
Please visit this fiddleto 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:
HTML：
<div class="outer">
<div class="inner-title">
THIS IS MY TITLE
</div>
<div class="inner-content">
CONTENT AREA
</div>
</div>
CSS:
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.
对此非常感谢的任何帮助。
回答by Sowmya
Add display:table;to parent div and display:table-row;to child divs
添加 display:table;到父 div 和 display:table-row;子 div
And height:0to first child div. This takes auto height
并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%
}
回答by Roko C. Buljan
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>