本文旨在解决Bootstrap 4中，在响应式布局下，当列内容较少、没有滚动条时，如何让列的高度自适应内容高度的问题。通过使用`@media`查询和`display: block!important`样式，可以在保持原有滚动条功能的同时，确保在内容较少时，列的高度正确显示。
在Bootstrap 4中，创建具有固定头部和底部，且内容区域包含可滚动列的布局是很常见的需求。 然而，当内容较少，以至于不需要滚动条时，这些列可能会占据剩余的垂直空间，导致不期望的视觉效果。本文将介绍如何使用CSS媒体查询来解决这个问题，确保列的高度始终适应其内容，同时保留原有的滚动条功能。
问题描述
假设我们有一个包含头部、内容和底部的Bootstrap 4布局。内容区域被划分为两列，这两列都应该是可滚动的。当内容足够多时，滚动条应该出现，而当内容较少时，列的高度应该自动调整以适应内容，而不是占据整个可用空间。
解决方案
核心思路是使用CSS媒体查询来检测屏幕尺寸，并根据屏幕尺寸应用不同的样式。当屏幕尺寸较小，例如移动设备时，我们将使用display: block!important来覆盖Bootstrap的默认flexbox行为，从而使列的高度适应其内容。
步骤 1: 初始HTML结构
首先，我们创建一个基本的HTML结构，使用Bootstrap 4的类来设置布局。
Bootstrap 4 Column Height
Header
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
Footer
在这个结构中：
- container-fluid 占据整个视口，并使用 d-flex flex-column vh-100 设置为flex容器，垂直方向排列。
- flex-shrink-0 确保头部和底部不会缩小。
- flex-grow-1 使得内容区域占据剩余的垂直空间。
- mh-100 和 overflow-auto 使列具有最大高度为100%和自动滚动条。
步骤 2: 添加媒体查询
接下来，我们添加一个媒体查询，当屏幕尺寸小于某个阈值时，将display: block!important 应用于包含列的行。
Bootstrap 4 Column Height
Header
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
World
Footer
在这个例子中，我们使用了 @media (max-width: 768px)，这意味着当屏幕宽度小于或等于768像素时，样式将被应用。你可以根据你的布局需求调整这个断点。
步骤 3: 验证结果
现在，当屏幕尺寸较大时，列将保持其可滚动行为。当屏幕尺寸较小时，列的高度将自动适应其内容，而不会占据整个可用空间。
总结
通过结合Bootstrap 4的flexbox布局和CSS媒体查询，我们可以轻松地控制列的高度，使其在不同屏幕尺寸下都能正确显示。 这种方法确保了在内容较少时，列不会不必要地占据空间，同时保留了在内容较多时滚动条的正常功能。 记住，根据你的具体需求调整媒体查询的断点，以获得最佳的响应式体验。
