如何解决如何使用Flexbox使div填充剩余的垂直空间?
我想在页面中垂直堆叠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>
解决方法
您的CSS已经在做您想要实现的目标。
flex: 1
是flex-grow: 1
的简写
由于其他项目的高度固定,flex: 1
会导致您的内容填充Flexbox的剩余空间。但是问题是您的flexbox容器没有高度,如果要覆盖整个页面,应在容器中添加height: 100vh
。
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}
,
在内容占据一定空间后,页脚不必从头开始,它会自动位于底部。
.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。