gpt4 book ai didi

html - Bootstrap - 具有可滚动内容的 Flex Box 容器

转载 作者:行者123 更新时间:2023-12-04 22:43:51 26 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap 5 和 flexbox 构建一个相当标准的应用程序布局,包括一个顶部栏、底部栏和一个自动调整大小的内容区域。内容区域分为侧边栏和主要内容区域。
作为引用,我希望它看起来像 VSCode。
enter image description here
为简洁起见省略了一些标签,这是我到目前为止的内容:

<!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>
我想要的是侧边栏内容在超出视口(viewport)中的可用空间时滚动,例如,如果您增加内容的高度 div在侧边栏中,整个地段一起滚动,并将底部栏推到视野之外。
如何保持所有面板(顶部、底部、侧面和主面板)都在 View 中,并在必要时允许单个面板滚动,而不会将内容推到 View 之外?

最佳答案

使用 flex - * 和 溢出- * 类(class)。此外,使用 vh-100 设置高度更容易。这样你就不需要设置 h-100在 html、body、container 等...

<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>
Codeply

相关: How to implement responsive, independently scrolling panes in Bootstrap?

关于html - Bootstrap - 具有可滚动内容的 Flex Box 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67692863/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com