我想让内容 div 适合 100% 的高度。由于某种原因,容器 div 恰好是一个 flex 元素。将 100% 高度设置为 flex 元素中的 div 是否合适?或者我也应该将内容 div 设置为 flex 元素。
此外,flex-direction 部分令人困惑。列不起作用,但行可以。我想 flex-direction 只影响 flex 元素。
<div class="wrapper">
<div class="container">
<div class="content">
Hello there
</div>
</div>
</div>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
border: 1px solid red;
padding: 20px;
min-height: 100%;
display: flex;
/* change flex-direction from column to row will work */
flex-direction: column;
}
.container {
border: 1px solid green;
padding: 20px;
flex: 1;
}
.content {
border: 1px solid blue;
height: 100%;
}
最佳答案
你可以重叠(嵌套) flex 盒子:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
border: 1px solid red;
padding: 20px;
min-height: 100%;
display: flex;
/* change flex-direction from column to row will work */
flex-direction: column;
box-sizing:border-box;
}
.container {
display:flex;
flex-direction: column;/* up to your needs */
border: 1px solid green;
padding: 20px;
flex: 1;
}
.content {
border: 1px solid blue;
flex:1;
}
<div class="wrapper">
<div class="container">
<div class="content">
Hello there
</div>
</div>
</div>
您可能还介意 box-sizing 属性以在尺寸计算中包含边框和填充。
关于html - 高度 100% flex ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48712511/