Bootstrap - 具有可滚动内容的 Flex Box 容器
ser*_*0ne 8 html css flexbox twitter-bootstrap bootstrap-5
我正在尝试使用 Bootstrap 5 和 Flexbox 构建一个相当标准的应用程序布局，由顶栏、底栏和自动调整大小的内容区域组成。内容区域分为侧栏和主要内容区域。
作为参考，我希望它看起来像 VSCode。
为了简洁起见，省略了一些标签，这是我到目前为止所拥有的：
<!doctype html>
<html class="h-100 mh-100" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
.sidebar {
background: red;
flex: 0 0 25%;
}
.main {
background: blue;
}
</style>
</head>
<body class="h-100 mh-100">
<div class="h-100 mh-100 d-flex flex-column">
<div class="bg-dark text-white p-1">
<span>Top Bar</span>
</div>
<div class="flex-fill d-flex flex-row">
<aside class="sidebar d-flex flex-column">
<div class="bg-dark text-white p-1">
<span>Side Title Bar</span>
</div>
<div class="sidebar-content overflow-scroll">
<div style="height: 0; background: magenta;"></div>
</div>
</aside>
<main class="main flex-fill">
</main>
</div>
<div class="bg-primary text-white p-1">
<span>Bottom Bar</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>
我想要的是侧边栏内容在超过视口中的可用空间时滚动，但例如，如果您增加侧边栏中内容的高度，则div整个内容会一起滚动，并将底部栏推出视图。
如何使所有面板保持在视图中（顶部、底部、侧面和主面板），并允许各个面板在必要时滚动，而不将内容推出视图之外？
使用flex- * 和overflow- * 类。另外，使用设置高度更容易，vh-100这样你就不需要h-100在 html、body、容器等上设置...
<div class="vh-100 d-flex flex-column overflow-hidden">
<div class="flex-shrink-1 bg-dark text-white p-1">
<span>Top Bar</span>
</div>
<div class="flex-fill d-flex flex-row overflow-auto">
<aside class="sidebar d-flex flex-column">
<div class="bg-dark text-white p-1">
<span>Side Title Bar</span>
</div>
<div class="sidebar-content p-2 overflow-auto">
</div>
</aside>
<main class="main flex-fill p-3 overflow-auto">
</main>
</div>
<div class="flex-shrink-1 bg-primary text-white p-1">
<span>Bottom Bar</span>
</div>
</div>
相关：如何在 Bootstrap 中实现响应式、独立滚动窗格？