Bootstrap 5填充剩余高度并滚动[重复]答案

【问题标题】：Bootstrap 5 fill remaining height and scroll [duplicate]Bootstrap 5填充剩余高度并滚动[重复]
【发布时间】：2022-01-08 02:21:23
【问题描述】：

如何确保两列适合剩余的高度，而且如果其中有更多内容，它们不会溢出，而是滚动？

我正在使用 Bootstrap 5。

html {
    position: relative;
    min-height: 100%;
}

main {
    height: 100%;
}

<!-- CSS only -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    
    <body>
        <main>

            <header class="container-fluid d-flex">
            
                header
            </header>
            
            <div class="container-fluid">
                <h1>Title</h1>

                <div class="row">
                    <div class="col-3 d-flex bg-primary">
                      Column1
                    </div>

                    <div class="col d-flex bg-secondary">
                      Column 2
                    </div>
                </div> <!-- / .row -->

            </div>
        </main>
    </body>
</html>

【问题讨论】：

标签： css twitter-bootstrap flexbox

【解决方案1】：

您应该在列上添加 CSS 属性，

overflow:auto

此属性仅在内容较多时添加滚动。

【讨论】：

谢谢，overflow-auto 有一个类，但它仍然需要填充剩余空间