html - 只有 css 的两行布局

Question

我需要为网页创建一个 2 行布局来管理过滤器部分和具有以下特征的结果的其他部分:

• 页面不能溢出100%的高度
• 第一行的高度取决于他的内容(可以是可变的，javascript函数可以通过隐藏一些元素来改变它)
• 第二行的高度是第一行高度的100%差值
• 在第二行中，带有溢出的 div 必须是带有类“list”的 div，我不能将它移动到带有 class="result"的 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 的解决方案。

谢谢!

Answer 1

如果您使用“flex: 1”属性声明您的 .result div，它将占用外部 div (.main) 中剩余的所有空间。因此，如果 .filter div 占据 500 个高度像素，则 .result 将调整空白区域，填充父级的 100%。如果你改变它动态隐藏或添加元素 flex: 1 将保证所有剩余空间将由 .result 自动填充。

希望对你有帮助