我有一个页面,我想以这样的方式设置样式:我有一个导航栏,其下方有一个固定高度的div,其下方有一个灵活的div,灵活的div包含两个水平排列的元素,并且灵活的div应该采用增加页面的剩余宽度。
我遵循了本教程,但是我没有达到他们描述的效果:https://css-tricks.com/boxes-fill-height-dont-squish/
我想要area-2
div 占据页面的剩余高度。
我怎样才能实现这个目标?
Stackblitz:https://stackblitz.com/edit/js-bnrfcu?file=style.css
<div class="nav">
<h1>Nav</h1>
</div>
<div class="area1">
<h4>Area1</h4>
</div>
<div class="fill-height">
<div class="area-2">
<div class="area-2-a">
<p>Area-2a</p>
</div>
<div class="area-2-b">
<p1>Area-2b</p1>
</div>
</div>
</div>
.nav {
height: 5rem;
background-color: aqua;
}
.nav-spacer {
margin-top: 5rem;
}
.area1 {
height: 10rem;
background-color: brown;
}
.fill-height {
display: flex;
flex-direction: column;
}
.fill-height > div {
flex: 1;
}
.area-2 {
display: flex;
flex-direction: row;
width: 100%;
}
.area-2-a {
width: 20%;
background-color: #4f90ff;
}
.area-2-b {
width: 80%;
background-color: #2b41ff;
}
最佳答案
使fill-height
div使用所有可用空间min-height: 100%;
,但是嘿,没有空间可以填充,好吧,height: 100vh;
负责处理这个问题。
body {
height: 100vh;
}
.fill-height {
display: flex;
flex-direction: column;
min-height: 100%;
}
关于html - 使用flexbox强制div填满页面剩余高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65852596/