我想在页面中垂直堆叠3个元素(页眉,页脚和一些内容)。页眉和页脚div的高度固定。如何使内容div(中间的那个)占据剩余的垂直空间?
我尝试使用Flexbox
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
}
.header {
background-color: red;
height: 100px;
}
.content {
background-color: blue;
flex: 1;
}
.footer {
background-color: green;
height: 30px;
}
<div class="wrapper">
<div class="header" />
<div class="content" />
<div class="footer" />
</div>
答案 0 :(得分:2)
您的CSS已经在做您想要实现的目标。
flex: 1
是flex-grow: 1
的简写
由于其他项目的高度固定,flex: 1
会导致您的内容填充Flexbox的剩余空间。但是问题是您的flexbox容器没有高度,如果要覆盖整个页面,应在容器中添加height: 100vh
。
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}
答案 1 :(得分:-1)
在内容占据一定空间后,页脚不必从头开始,它会自动位于底部。
.wrapper {
width: 100%;
}
.header {
background-color: red;
height: 100px;
}
.content {
background-color: blue;
height:200px;
}
.footer {
background-color: green;
height: 30px;
}
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>