如何让元素占满垂直空间？React+Bootstrap布局调整问询

需求回顾 #

• 底部固定导航栏，不遮挡页面内容
• 左右两侧各占50%宽度（全断点生效）
• 左侧所有box元素占满可用垂直高度

具体修改步骤 #

1. 处理底部固定导航栏的遮挡问题 #

固定定位的导航栏会覆盖页面底部内容，需要给主容器添加等于导航栏高度的底部内边距：

• 给最外层容器设置padding-bottom: 150px（对应导航栏的height: 150px）
• 替换原container-flex为container-fluid，移除m-3改为m-0，让容器占满视口宽度且无额外留白

2. 实现左右各50%宽度 #

使用Bootstrap的col-6替代原col-sm，确保在所有屏幕尺寸下两侧都各占50%宽度：

• 将左右两个侧边的<div className="col-sm">改为<div className="col-6 h-100">
• 给父级row添加h-100，让行高度继承自容器

3. 让左侧box占满垂直高度 #

通过弹性盒布局实现高度自动填充：

• 给html和body添加height: 100%，确保根元素占满视口高度
• 左侧列添加d-flex flex-column gap-3，改为垂直弹性布局，用gap替代mb-3避免margin高度计算问题
• 每个包含卡片的行添加flex-grow-1，让它们自动分配剩余垂直空间
• 每个col-3添加d-flex，内部box设置h-100，确保卡片占满所在行的高度

修改后的完整代码 #

CSS 部分 #

body,
html {
  margin: 0;
  padding: 0;
  height: 100%; /* 让根元素占满视口高度 */
}

* {
  box-sizing: border-box;
}

.box {
  min-height: 100px;
  min-width: 100px;
  transition: transform .6s;
}

.color {
  background-color: rgba(58, 140, 190, 255);
}

.icon-white {
  color: white;
}

.card-text {
  color: white;
}

.title {
  color: rgba(255, 255, 255, 0.418);
  font: 1.5vw sans-serif;
}

React JSX 部分 #

import 'bootstrap/dist/css/bootstrap.min.css';

export default function LayoutComponent() {
  return (
    <div className="container-fluid h-100 m-0" style={{ paddingBottom: '150px' }}>
      <div className="row h-100">
        {/* 左侧50%列：垂直弹性布局 */}
        <div className="col-6 h-100 d-flex flex-column gap-3 p-3">
          {/* 第一行卡片组 */}
          <div className="d-flex justify-content-around gap-3 flex-grow-1">
            <div className="col-3 d-flex">
              <div className="h-100 color p-3 box" style={{ borderRadius: '5%' }}>
                <div>
                  <h4 className="title">TEXT</h4>
                  <h5 className="card-text">TEXT</h5>
                </div>
                <div>
                  <h5 className="card-text">ICON</h5>
                </div>
              </div>
            </div>
            <div className="col-3 d-flex">
              <div className="h-100 color p-3 box" style={{ borderRadius: '5%' }}>
                <div>
                  <h4 className="title">LONG TEXT</h4>
                  <h5 className="card-text">TEXT</h5>
                </div>
                <div>
                  <h5 className="card-text">ICON</h5>
                </div>
              </div>
            </div>
            <div className="col-3 d-flex">
              <div className="h-100 color p-3 box" style={{ borderRadius: '5%' }}>
                <div>
                  <h4 className="title">TEXT</h4>
                  <h5 className="card-text">TEXT</h5>
                </div>
                <div>
                  <h5 className="card-text">ICON</h5>
                </div>
              </div>
            </div>
          </div>
          {/* 第二行卡片组 */}
          <div className="d-flex justify-content-around gap-3 flex-grow-1">
            <div className="col-3 d-flex">
              <div className="h-100 color p-3 box" style={{ borderRadius: '5%' }}>
                <div>
                  <h5 className="title text-uppercase">TEXT</h5>
                  <h4 className="card-text text-capitalize">TEXT</h4>
                </div>
                <div>
                  <h5 className="card-text">ICON</h5>
                </div>
              </div>
            </div>
            <div className="col-3 d-flex">
              <div className="h-100 color p-3 box" style={{ borderRadius: '5%' }}>
                <div>
                  <h5 className="title text-uppercase">TEXT</h5>
                  <h4 className="card-text">TEXT</h4>
                </div>
                <div>
                  <h5 className="card-text">ICON</h5>
                </div>
              </div>
            </div>
            <div className="col-3 d-flex">
              <div className="h-100 color p-3 box" style={{ borderRadius: '5%' }}>
                <div>
                  <h5 className="title text-uppercase">TEXT</h5>
                  <h4 className="card-text">TEXT</h4>
                </div>
                <div>
                  <h5 className="card-text">ICON</h5>
                </div>
              </div>
            </div>
          </div>
          {/* 第三行卡片组 */}
          <div className="d-flex justify-content-around gap-3 flex-grow-1">
            <div className="col-3 d-flex">
              <div className="h-100 color p-3 box" style={{ borderRadius: '5%' }}>
                <div>
                  <h5 className="title text-uppercase">TEXT</h5>
                  <h4 className="card-text text-capitalize">TEXT</h4>
                </div>
                <div>
                  <h5 className="card-text">ICON</h5>
                </div>
              </div>
            </div>
            <div className="col-3 d-flex">
              <div className="h-100 color p-3 box" style={{ borderRadius: '5%' }}>
                <div>
                  <h5 className="title text-uppercase">TEXT</h5>
                  <h4 className="card-text">LONG LONG TEXT</h4>
                </div>
                <div>
                  <h5 className="card-text">ICON</h5>
                </div>
              </div>
            </div>
            <div className="col-3 d-flex">
              <div className="h-100 color p-3 box" style={{ borderRadius: '5%' }}>
                <div>
                  <h5 className="title text-uppercase">TEXT</h5>
                  <h4 className="card-text">TEXT</h4>
                </div>
                <div>
                  <h5 className="card-text">ICON</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* 右侧50%列 */}
        <div className="col-6 h-100 p-3">
          <div className="h-100 color p-3 box" style={{ borderRadius: '5%' }}>
            <div>
              <h4 className="title">TEXT</h4>
            </div>
            <div>
              <h5 className="card-text">ICON</h5>
            </div>
          </div>
        </div>
      </div>
      {/* 底部固定导航 */}
      <div className="fixed-bottom bg-dark" style={{ height: '150px' }}>
        <h3 className="text-success">BOTTOM NAV BAR</h3>
      </div>
    </div>
  );
}

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