提问人：FlamingMoe 提问时间：8/22/2023 最后编辑：FlamingMoe 更新时间：8/22/2023 访问量：41
带有自己滚动的列占用 100vh 容器的 100% 可用空间
Columns with its own scroll taking the 100% of available space of a 100vh container
问：
我正在尝试拥有 3 列自己的滚动，但占用了 100% 的可用空间。
但是没有滚动，或者他们没有得到 100% 的可用空间。
重要的是，正文不必有滚动（这就是容器 100vh 的原因），并且标题占用其内容所需的空间。无法修复。
如果我添加“每列 100vh”......这些列在底部走得更远。
如果我将 overflow：hidden 添加到 container-xxl 中，页面肯定会停在那里，但是页面之外的列缺少信息，您会注意到，因为滚动条比页面顶部更远。
我知道如何使用 JavaScript 做到这一点，但我确信有一种方法可以在 CSS 中做到这一点。
像这样的东西：
它在这里：Codepen
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-xxl flex-grow-1" style="height: 100vh;">
<div class="row h-100">
<div class="col-2" id="left">
side bar menu
</div>
<div class="col-12 col-md-10 h-100 d-flex flex-column" id="right">
<div class="row">
<div class="col-12">
Header with some stuff ...
<p>some stuff of the header</p>
</div>
<div class="row h-100" id="threecolumns" style="background-color:#fee">
<div class="col-4 h-100 overflow-auto" style="background-color:#f2e">
column with its own scroll
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
<div class="col-4 h-100 overflow-auto" style="background-color:#d3e">
column with its own scroll
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
<div class="col-4 h-100 overflow-auto" style="background-color:#e4e">
column with its own scroll
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>答：
0赞
Aman Sharma
8/22/2023
#1
添加到每个列，然后添加到100vhoverflow:hidden;container-xxl
评论
0赞
Md. Rakibul Islam
8/22/2023
然后列的溢出将被隐藏，不可滚动。
0赞
FlamingMoe
8/22/2023
我已经用“每列 100vh”更改了 codepen ......所以你可以看到这些列在底部更远。如果我将 overflow：hidden 添加到 container-xxl 中，页面肯定会停在那里，但是页面之外的列缺少信息，您可能会注意到，因为滚动条比页面顶部更远
评论