引导溢出在网格列上不起作用

Question

使用bootstrap 5.2.3

我确信这不是bootstrap的问题，但我不理解flex系统和溢出完全.

如下图所示，第一个div的高度固定为100vh。我想要导航栏，主要内容和页脚

带有图像的容器应该是可滚动的，因此是overflow: scroll样式。但是它脱离了父元素并弄乱了页面。我想这可能与网格有关(row和col类)

<div class="vh-100 d-flex flex-column">
<div>
<h1>Navigation bar</h1>
</div>
<div class="flex-fill d-flex flex-column">
<h1>Main content</h1>
<div class="flex-fill d-flex flex-column">
<div class="row flex-fill">
<div class="col-6">
<p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto consequuntur harum hic inventore laborum maiores necessitatibus nihil nobis officia optio perspiciatis quaerat quas quo reprehenderit rerum sequi, veritatis, vitae?</p>
</div>
<div class="col-6">
<div class="d-flex flex-column flex-wrap gap-2 overflow-scroll">
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
</div>
</div>
</div>
<p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum itaque nemo placeat sed voluptatum! Adipisci beatae debitis deleniti dignissimos doloremque, doloribus eius facere illo in, nisi nostrum quia repudiandae sit!</p>
</div>
</div>
<div>
<h1>Footer</h1>
</div>
</div>

Answer 1

在使用Flex时，您并不是唯一一个努力使overflow-scroll工作的人。但是，如果您花时间了解Flex的行为，就可以做到这一点。我将带你走过必要的每一步，以达到你所追求的结果。

让我们开始吧。

说明CSS

我们的HTML有三个部分:#header,#main和#footer。

对于你想要的行为，最好先设置你想要固定的元素的高度(#header&#footer)，然后计算剩余的视口高度，并将其应用于main。

我们可以使用CSS变量轻松做到这一点。我们首先在:root选择器中声明header和footer的高度变量，因此它们将具有全局作用域，这意味着我们可以在样式表的任何地方使用它们。

:root {
--headerHeight: 100px;
--footerHeight: 100px;
} 

然后定义稍后需要的totalHeight。在calc()函数中，我们计算headerHeight和footerHeight变量的和，我们可以使用var()函数访问它们。

由于两者都设置在100px上，因此totalHeight将是200px。

--totalHeight: calc( var(--headerHeight) + var(--footerHeight) ) //200px

如果您想将headerHeight更改为150px，而不必手动将totalHeight更改为250px，这将使您的生活更轻松。

然后将相应的变量应用于#header和#footer元素。

那么我们如何为剩下的内容#main设置高度呢?简单!我们取完整的视口高度100vh并减去totalHeight。完成了!

#main {
height: calc(100vh - var(--totalHeight) );
}

解释HTML，使用Bootstrap

完成所有工作的部分是:

<div class="container d-flex flex-column" id="main">
<div class="row flex-grow-1 overflow-auto">

首先，我们使用.d-flex类将容器设置为伸缩容器。因为我们想要垂直堆叠我们的内容，我们使用.flex-column类，将flex-direction设置为column。

然后是我们的第一个row，它将自动表现为flex item，因为它是flexcontainer的直接子节点。这意味着我们可以通过使用类.flex-grow-1对其应用flex-grow属性。美妙之处在于，这个row现在将增长以填充可用空间，同时允许其余行拥有必要的空间。

它是完全响应的，就像这样!

剩下要做的就是应用.overflow-auto类，所以只有如果这个row溢出，将出现一个滚动条。

请看下面的代码片段。最好的方法是使用Full page选项查看它，打开开发工具并切换响应选项。现在，您可以手动降低页面的高度，并在空间耗尽时观察滚动条的显示!

还有，这里是JSFiddle。

:root {
--headerHeight: 100px;
--footerHeight: 100px;
--totalHeight: calc( var(--headerHeight) + var(--footerHeight) )
}
#header {
height: var(--headerHeight);
}
#footer {
height: var(--footerHeight);
}
#main {
height: calc(100vh - var(--totalHeight) );
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container-fluid p-0">
<!-- Header -->
<div class="bg-primary py-4" id="header">
<h1 class="text-center text-white m-0">Navigation bar</h1>
</div>
<!-- Main Content -->
<div class="container d-flex flex-column" id="main">
<div class="row flex-grow-1 overflow-auto">
<div class="col">
<span>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto consequuntur harum hic inventore laborum maiores necessitatibus nihil nobis officia optio perspiciatis quaerat quas quo reprehenderit rerum sequi, veritatis, vitae?</span>
</div>
<div class="col">
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
<div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>       
</div>
</div>
<div class="row">
<span>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum itaque nemo placeat sed voluptatum! Adipisci beatae debitis deleniti dignissimos doloremque, doloribus eius facere illo in, nisi nostrum quia repudiandae sit!</span>
</div>
</div>
<!-- Footer -->
<div class="bg-secondary py-4" id="footer">
<h1 class="text-center text-white m-0">Footer</h1>
</div>
</div>

其他解决方案

如果你的header和/或footer的高度不是固定的，你可以:

1. 设置一个max-height在溢出时滚动的元素;
2. 使用JavaScript获得header和footer的高度总和，并将剩余的视口高度应用于#main。