高度 100% 在列弹性框祖先下不起作用

.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.body {
flex-grow: 1;
flex-shrink: 0;
background-color: #a0a0a0;
}
.content {
height: 100%;
background-color: #c0c0c0;
}

<div class="layout">
Header
<div class="body">
Body
<div class="content">
Content
</div>
</div>
Footer
</div>

为什么div.content不能占据100%的窗口
有没有一种方法可以使div.content在具有div.layout柔性箱的情况下100%垂直跨度
如果没有，在拥有这种页眉-正文-页脚结构的情况下，我如何才能做到这一点

编辑1

div.body应遵循默认显示属性。我不能把它做成柔性盒子

.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.body {
flex-grow: 1;
flex-shrink: 0;
background-color: #a0a0a0;
display: flex;
flex-direction: column;
}
.content {
height: 100%;
background-color: #c0c0c0;
flex-grow: 1;
flex-shrink: 0;
}

<div class="layout">
Header
<div class="body">
Body
<div class="content">
Content
</div>
</div>
Footer
</div>

.layout {
display: flex;
flex-direction: column;
height: 100vh;
}

编辑div.latout代码->最小高度变化高度

编辑1

相关内容

最新更新

热门标签：