如何让Bootstrap 5中的content-container div填充剩余垂直空间？

我是网页设计新手，正在开发一个网页布局：左侧为完整侧边栏，右侧有导航栏，内容区分两列展示。其中content-container用于显示动态内容，我希望这个div填充页眉到页面底部的剩余垂直空间，以便在右侧第二列添加页脚，并在第一列实现无限滚动。但我尝试了多种CSS方法都无效。

我曾尝试设置content-container div的height为100%，但没有效果。

我尝试过的方法：

• 为content-container列及其父元素（html、body和wrapper）设置height: 100%，但该列仍未填充可用垂直空间。
• 为父弹性容器添加align-items: stretch属性，content-container列尺寸仍未改变。

请问如何让content-container列填充可用垂直空间且不超出视口底部？有没有更好的实现方法？

原代码 #

CSS #

* {
  /* variables */
  --main-color: #2a2d2f;
  /* variable establecida */
  --border-color: dimgrey;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat';
  color: var(--main-color);
  /* utilizando la variable */
}

.page-wrapper {
  height: 100vh;
  width: 100vw;
  background-color: #b7dad6;
}


/*  Sidebar */

#sidebar {
  max-width: 250px;
  height: 100%;
  border-right: dimgrey 0.05rem solid;
}

.logo-container {
  padding-left: 2rem;
}


/* remove link effect */

.sidebar a:link,
.sidebar a:hover,
.sidebar a:visited,
.sidebar a:active {
  text-decoration: none;
  color: var(--main-color);
  /* utilizando la variable */
}

.sidebar-element {
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 1.2rem;
}

.sidebar-element:hover {
  background-color: #cec9c9;
}

.sidebar-element .active {
  font-weight: bold;
}


/* content */

content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-color: #b7dad6;
}


/* Navbar */

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #b5dffd;
  height: 3rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: 100%;
  border-bottom: var(--border-color) 0.05rem solid;
}

.extra-content-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #b5dffd;
  height: 3rem;
  margin-bottom: 2rem;
  border-left: var(--border-color) 0.05rem solid;
}


/*   ICONS */

.bi {
  color: var(--main-color);
  /* utilizando la variable */
  padding: 0.5rem;
}

HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- <link href="sidebar.css" rel="stylesheet"> -->

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>


<div class="page-wrapper d-flex container-fluid bg-gray">

  <!-- Sidebar -->
  <div class="navbar d-flex align-items-end flex-column mb-3" id="sidebar">
    <div class="container-sm py-5 mt1 logo-container">
      <a class="" href="#" , style="margin-bottom: 0px">
        <img src="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" height="40">
      </a>
    </div>
    <div class="sidebar container-sm py-2 px-2">

      <div class="sidebar-element flex-grow-1">
        <i class="bi bi-binoculars-fill"></i>
        <a class="active" href="#">Explore</a>
      </div>
      <div class="sidebar-element flex-grow-1">
        <i class="bi bi-bookmark-star"></i>
        <a href="#">Bookmarks</a>
      </div>
      <div class="sidebar-element flex-grow-1">
        <i class="bi bi-person"></i>
        <a href="#">Profile</a>
      </div>
    </div>
    <div class="sidebar container-sm mt-auto py-2">
      <div class="sidebar-element flex-grow-1">
        <i class="bi bi-gear"></i>
        <a href="#">Configuration</a>
      </div>
    </div>
  </div>

  <!--  Content  -->
  <div class="content-container container text-center">
    <div class="row flex-grow-1 d-flex" style="background-color: #ec1b1b">
      <div class="col navbar-container" style="background-color: #8cdae7">
        NAVBAR
      </div>
    </div>
    <div class="row card-main-container" style="background-color: darkkhaki">
      <div class="col-8">
        Main content with infinite scroll here
      </div>
      <div class="extra-content-container col-4">
        <div>
          some extra content plus a the footer on the bottom
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

核心问题是没正确利用Flexbox特性，同时存在CSS选择器和Bootstrap类的使用错误，以下是修复方案：

1. 修正CSS选择器错误 #

你写的content-container是标签选择器，但HTML里它是class，要改成.content-container。

2. 让content-container填充剩余空间 #

给.content-container添加flex-grow: 1，同时设置display: flex; flex-direction: column;，让内部元素垂直分配空间。移除container类（它会限制宽度并加左右padding），换成w-100占满宽度。

3. 处理内容区域垂直分配 #

给card-main-container加flex-grow: 1，让它占满content-container的剩余空间；左侧主内容列加overflow-y: auto，作为无限滚动的滚动容器；右侧列设为d-flex flex-column，用margin-top: auto把页脚推到底部。

修改后的完整代码 #

CSS

* {
  /* variables */
  --main-color: #2a2d2f;
  --border-color: dimgrey;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat';
  color: var(--main-color);
}

.page-wrapper {
  height: 100vh;
  width: 100vw;
  background-color: #b7dad6;
  overflow: hidden; /* 避免整体视口滚动 */
}

/*  Sidebar */
#sidebar {
  max-width: 250px;
  height: 100%;
  border-right: dimgrey 0.05rem solid;
}

.logo-container {
  padding-left: 2rem;
}

/* remove link effect */
.sidebar a:link,
.sidebar a:hover,
.sidebar a:visited,
.sidebar a:active {
  text-decoration: none;
  color: var(--main-color);
}

.sidebar-element {
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 1.2rem;
}

.sidebar-element:hover {
  background-color: #cec9c9;
}

.sidebar-element .active {
  font-weight: bold;
}

/* content */
.content-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 占满page-wrapper剩余空间 */
  width: 100%;
  background-color: #b7dad6;
  padding: 0 1rem; /* 可选：添加内边距 */
}

/* Navbar */
.navbar-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #b5dffd;
  height: 3rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: 100%;
  border-bottom: var(--border-color) 0.05rem solid;
}

.extra-content-container {
  display: flex;
  flex-direction: column; /* 改为垂直布局 */
  background-color: #b5dffd;
  border-left: var(--border-color) 0.05rem solid;
  padding: 1rem;
}

.extra-content-container .footer {
  margin-top: auto; /* 把页脚推到底部 */
  padding-top: 1rem;
  border-top: var(--border-color) 0.05rem solid;
}

/* 滚动内容容器 */
.main-scroll-content {
  overflow-y: auto;
  height: 100%;
  padding: 1rem;
}

/*   ICONS */
.bi {
  color: var(--main-color);
  padding: 0.5rem;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>

<div class="page-wrapper d-flex">
  <!-- Sidebar -->
  <div class="navbar d-flex align-items-end flex-column mb-3" id="sidebar">
    <div class="container-sm py-5 mt1 logo-container">
      <a class="" href="#" style="margin-bottom: 0px">
        <img src="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" height="40">
      </a>
    </div>
    <div class="sidebar container-sm py-2 px-2">
      <div class="sidebar-element flex-grow-1">
        <i class="bi bi-binoculars-fill"></i>
        <a class="active" href="#">Explore</a>
      </div>
      <div class="sidebar-element flex-grow-1">
        <i class="bi bi-bookmark-star"></i>
        <a href="#">Bookmarks</a>
      </div>
      <div class="sidebar-element flex-grow-1">
        <i class="bi bi-person"></i>
        <a href="#">Profile</a>
      </div>
    </div>
    <div class="sidebar container-sm mt-auto py-2">
      <div class="sidebar-element flex-grow-1">
        <i class="bi bi-gear"></i>
        <a href="#">Configuration</a>
      </div>
    </div>
  </div>

  <!--  Content  -->
  <div class="content-container text-center">
    <div class="row">
      <div class="col navbar-container">
        NAVBAR
      </div>
    </div>
    <div class="row card-main-container flex-grow-1 d-flex">
      <div class="col-8 d-flex flex-column">
        <div class="main-scroll-content">
          Main content with infinite scroll here<br>
          <!-- 模拟长内容测试滚动 -->
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
          <p>内容行<br></p>
        </div>
      </div>
      <div class="extra-content-container col-4">
        <div>some extra content</div>
        <div class="footer">Footer fixed at bottom</div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

关键说明 #

• page-wrapper加overflow: hidden，把滚动限制在主内容区域，避免整体视口出现滚动条。
• .content-container用flex-grow: 1从父容器获取剩余空间，同时通过垂直flex布局管理内部元素。
• 主内容列的.main-scroll-content设置overflow-y: auto，内容超出时自动显示滚动条，实现无限滚动的基础。
• 右侧列通过flex-direction: column和margin-top: auto，把页脚固定在列的底部。

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