为何内容列延伸至footer下方？Bootstrap布局问题求助

核心问题 #

你当前的布局问题出在中间行（.row）使用了vh-100类——这个类会让行的高度等于整个视口高度，但你的header是fixed-top、footer是fixed-bottom，这两个元素脱离文档流，不会占用布局空间。因此.row的vh-100会直接占满整个视口，导致内容延伸到footer下方被遮挡。

解决方案 #

通过Flex布局重构页面结构，让中间内容区域自动占据header和footer之外的剩余空间，具体修改如下：

1. 调整HTML结构

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body class="d-flex flex-column min-vh-100 overflow-hidden">
  <!-- 固定头部，确保包含fixed-top类 -->
  <header class="fixed-top">
    <%= render "header"%>
  </header>

  <!-- 中间内容区域，用flex-grow-1占据剩余空间 -->
  <main class="flex-grow-1 container-fluid">
    <div class="row h-100">
      <div class="col-md-2 h-100 overflow-y-scroll">
        <%= render "calendarbar"%>
      </div>
      <div class="col-md-8 h-100 overflow-y-hidden">
        <%= yield %>
      </div>
      <div class="col-md-2 h-100 border overflow-y-scroll">
        <%= render "messengerbar"%>
      </div>
    </div>
  </main>

  <!-- 固定底部，确保包含fixed-bottom类 -->
  <footer class="fixed-bottom">
    <%= render "footer"%>
  </footer>
</body>

2. 保留body的内边距设置

body {
    padding-top: 75px; /* 值需与header的实际高度一致 */
    padding-bottom: 75px; /* 值需与footer的实际高度一致 */
}

修改说明 #

• 将body设置为Flex容器（d-flex flex-column min-vh-100），确保页面高度至少占满视口，同时让子元素按垂直方向排列。
• 中间的main容器添加flex-grow-1，使其自动占据header和footer之外的所有剩余空间。
• 移除.row和.col-*上的vh-100，改用h-100让它们继承父容器的高度，这样滚动区域的高度会被限制在header和footer之间，不会延伸到底部。

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