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