如何实现自适应高度的Bootstrap轮播，填充页眉页脚间空间？

首先得搞清楚核心问题：为什么设置height: 100%后轮播会消失？百分比高度依赖父元素有明确的高度参考值，你之前的Grid布局里carousel所在行用的是auto（仅匹配内容高度），再加上HTML和body默认没有占满视口的高度设置，导致100%没有可继承的基准，轮播自然就“隐身”了。

下面是具体的修复方案，一步步来：

1. 给页面根元素设置完整视口高度 #

先添加这段CSS，让html和body能覆盖整个浏览器窗口，给后续的Grid布局提供可靠的高度基础：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 调整Grid布局，让轮播行自动分配剩余空间 #

修改#frontpagebody的Grid配置，把carousel所在行的auto换成1fr——1fr是Grid的“剩余空间分配单位”，会自动占满页眉之后、页脚（和main）之前的所有可用空间：

#frontpagebody{ 
  grid-template-rows: 60px 1fr auto 150px; /* carousel行用1fr抢占剩余空间 */
  grid-template-areas: 
    "header header" 
    "carousel carousel" 
    "main main" 
    "footer footer"; 
  grid-gap: 0; 
  min-height: 100vh; /* 确保页面至少占满视口，内容过多时自动延伸 */
}

如果不需要main部分，直接把grid-template-rows改成60px 1fr 150px，同时去掉grid-template-areas里的main行即可。

3. 修复轮播组件的高度和图片自适应 #

把轮播的固定高度改成100%，同时给轮播图片添加自适应样式，避免拉伸变形：

.carousel { 
  height: 100%; /* 占满所在Grid行的全部高度 */
  grid-area: carousel; 
  overflow: hidden; /* 防止图片溢出轮播容器 */
}

.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* 保持图片比例，同时填满轮播容器 */
}

方案原理说明 #

• html, body的height:100%+min-height:100vh确保页面基础高度覆盖视口，不会因为内容不足而缩成一团。
• Grid的1fr行让轮播区域自动“挤压”剩余空间，不管浏览器窗口怎么调整大小，轮播都会填满页眉和页脚之间的空隙。
• object-fit: cover保证轮播图片不会被拉伸变形，同时完美适配轮播容器的尺寸。

现在你可以测试一下：调整浏览器窗口大小，轮播高度会自动跟着变化，图片也会保持比例填充整个轮播区域，页眉和页脚的位置也会稳定在顶部和底部。

内容的提问来源于stack exchange，提问作者ENBYSS