如何让Bootstrap 5的container容器高度适配屏幕高度？

问题原因 #

你设置100vh后仍然溢出，主要是几个常见问题导致：

1. 浏览器默认给html、body设置了边距，且默认盒模型是content-box，设置的高度不包含padding、border，会额外撑高容器
2. 你的HTML结构不符合Bootstrap栅格规范，col必须嵌套在row中使用，否则会出现多余的边距溢出
3. 日历组件本身的默认高度超出了父容器限制，没有做滚动适配

具体修改方案 #

1. 调整全局基础CSS

先重置默认边距和盒模型，避免基础样式干扰：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}

2. 优化你的容器高度类

修改sectionHeight配置，支持内容超出时内部滚动，不会撑开容器超出屏幕：

.sectionHeight {
  /* 如果页面有顶部导航栏，将100vh替换为calc(100vh - 导航栏高度)，比如导航高56px就写calc(100vh - 56px) */
  height: 100vh;
  overflow-y: auto;
  width: auto;
}

如果需要日历部分占满剩余容器高度，可额外添加日历高度限制：

#calendar {
  /* 100px是容器内h3标题、提示文字、加载动画的预估总高度，可根据实际情况调整 */
  height: calc(100% - 100px);
}

3. 修正HTML栅格结构

Bootstrap要求所有col类必须嵌套在row类中使用，否则会出现多余边距：

<div id="calendarAdmin"  class="container sectionHeight" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
  <!-- 新增row层包裹内容，符合栅格规则，g-0可清除默认间距，不需要可删除 -->
  <div class="row g-0">
    <div id="includedContent"></div>

    <div class="col-lg-12 col-md-12 col-sm-12 col-12 beta">
        <h3>Full Callendar</h3>
        
        <div style="text-align: center;">
            <span id="ajaxGetUserServletResponse1" style="color: red; background-color: white;"></span>
        </div>
        
        <div id="loader"><img src="images/spinner.gif" alt="加载中"/></div><!-- loading spinner -->
        
        <div class="whiteBackground" id="calendar"></div>
    </div>
  </div>
</div>

可选：FullCalendar组件配置适配

如果你使用的是FullCalendar v5及以上版本，可在初始化时指定高度继承父容器，避免自身高度溢出：

const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
  // 其余原有配置保留
  height: 'parent'
});
calendar.render();

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