我对包含在 flex 盒内的 flex 盒有疑问。 JS Fiddle 在 http://jsfiddle.net/fr077nn2/包含以下代码:
#container{
position: absolute;
height: 100%;
width: 100%;
border: 3px solid yellow;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
border: 3px solid black;
}
.app-header {
border: 3px solid red;
}
.app-content {
border: 3px solid green;
flex: 1;
overflow: hidden;
}
.app-footer {
border: 3px solid blue;
}
<div id="container">
<div class="app">
<div class="app-header">HEADER1</div>
<div class="app-content">
<div class="app">
<div class="app-header">HEADER2</div>
<div class="app-content">CONTENT2</div>
<div class="app-footer">FOOTER2</div>
</div>
</div>
<div class="app-footer">FOOTER1</div>
</div>
</div>
我试图让 .app-content DIV 填满父 .app DIV 的剩余空间。它适用于外箱,如 fiddle 所示。但是,对于内框,CONTENT2 没有填充剩余空间。我怀疑 height:100% 在那种情况下不起作用,因为父 DIV 的高度不为人所知……有什么建议可以正确实现上述目标吗?
编辑:在 Firefox 上正常运行,但在 Chrome 上运行不正常。
最佳答案
一般来说,100% 高度适用于父元素具有明确定义的高度的情况。在您的示例中,最外层的应用程序内容没有明确的高度,这就是为什么 100% 高度在其子项上不起作用的原因。
一个简单的解决方法是使用相对-绝对定位来调整 child 的大小:
#container {
position: absolute;
height: 100%;
width: 100%;
border: 3px solid yellow;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
border: 3px solid black;
}
.app-header {
border: 3px solid red;
}
.app-content {
border: 3px solid green;
flex: 1;
/* added property */
position: relative;
}
.app-footer {
border: 3px solid blue;
}
/* added rule */
.app-content > .app {
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* scrollbar and border correction */
body {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
<div id="container">
<div class="app">
<div class="app-header">HEADER1</div>
<div class="app-content">
<div class="app">
<div class="app-header">HEADER2</div>
<div class="app-content">CONTENT2</div>
<div class="app-footer">FOOTER2</div>
</div>
</div>
<div class="app-footer">FOOTER1</div>
</div>
</div>
关于html - flex 盒内 flex 盒的 CSS 高度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27493509/