两排布局仅适用于CSS
问题描述:
我需要创建一个网页的2行布局,以管理求过滤器和其他部分为具有以下特征的结果的部分:两排布局仅适用于CSS
- 页面无法溢出的高度100%
- 第一行的高度是基于他的内容(可以是可变的,并且一个javascript函数可以通过隐藏某些元素来改变它)
- 第二行的高度是100%和高度之间的差值第一排
- in t他第二排与溢出的div必须是一个带班“名单”,我不能移动它带有class =“结果”来div的(这将使它工作)
HTML:
<div class="main">
<div class="filter">
<div class="filtercontent">
filter content
</div>
</div>
<div class="result">
<div class="resultcontent">
<div class="list">
<div class="listcontent">
list content
</div>
</div>
</div>
</div>
</div>
CSS:
.main {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.filter {
width: 100%;
}
.result {
width: 100%;
}
.resultcontent {
height: 100%;
width: 100%;
}
.list {
height: 100%;
width: 100%;
overflow: auto;
}
.listcontent {
height: 1000px;
width: 2000px;
}
我试着用Flexbox的(以不同的方式),但我无法找到最后一个点的解决方案。
重要提示:我无法使用javascript设置行的高度。我需要一个只使用CSS的解决方案。
谢谢!
答
如果使用“flex:1”属性声明.result div,则它将占用外部div(.main)中剩余的所有空间。因此,如果.filter div占用500个高度像素,则.result将在填充100%的空白空间中调整。如果您动态更改它隐藏或添加元素flex:1将保证所有剩余的空间将自动填充.result。
希望它有帮助
感谢您的回答。我已经尝试设置“flex:1”,但他的孩子(身高:100%)无法检测到他父母的真实身高 – Fabio
这是因为这种形式的属性声明(带有百分比)总是相对于其父母,始终通过根元素“级联”。如果你将高度:100%设置为html和body元素,并且溢出:隐藏到.main类,你应该很好去。 –