如何实现区块浮动高度？Bootstrap布局滚动区块自适应及高度对齐问题

我来帮你搞定这个布局问题！你现在的核心问题是没利用Flexbox正确分配容器内的剩余高度，而且给滚动区块设置了固定高度height:500px，这直接导致它无法自适应剩余空间。另外，min-height:100%在嵌套容器里的高度继承逻辑比较复杂，用Flexbox是更可靠的方案。

问题拆解 #

• 你的.all-height容器只设置了min-height:100%，但没变成Flex容器，内部子元素无法自动分配剩余高度
• .all-height__itme-three设置了固定height:500px，完全限制了它的高度，无法实现“浮动高度”
• 右侧列里的.all-height__itme-four和.all-height__itme-five用了height:100%，但父容器没有正确的高度继承，导致无法填满剩余空间

修复方案 #

我们把.all-height改成垂直方向的Flex容器，利用flex-grow:1让需要占剩余高度的区块自动填充空间，同时调整滚动区块的属性：

修改后的CSS

/* 让.all-height变成垂直flex容器，占满父级高度 */
.all-height {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.all-height__itme-one {
  background: #5bc0eb;
  height: 200px;
  margin-bottom: 20px;
  padding: 10px;
}
.all-height__itme-two {
  background: #e7606b;
  min-height: 300px;
  margin-bottom: 20px;
  padding: 10px;
}
/* 去掉固定height，用flex-grow:1占剩余空间，设置垂直滚动 */
.all-height__itme-three {
  background: #68d8d6;
  flex-grow: 1;
  margin-bottom: 20px;
  padding: 10px;
  overflow-y: auto;
}
.all-height__itme-three-item {
  margin-bottom: 20px;
  background-color: #e7606b;
  padding: 15px;
  color: #fff;
}
/* 右侧的子容器也需要变成flex，让内部元素填满高度 */
.all-height__inner-row {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.all-height__itme-four {
  background: #59a5d8;
  flex-grow: 1;
  margin-bottom: 20px;
  padding: 10px;
}
.all-height__itme-five {
  background: #ccd42c;
  flex-grow: 1;
  margin-bottom: 20px;
  padding: 10px;
}

修改后的HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row align-items-stretch">
    <div class="col-xl-4">
      <div class="all-height">
        <div class="all-height__itme-one">
          <p>This unit with fixed height</p>
        </div>
        <div class="all-height__itme-three">
          <p>Floating altitude</p>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
        </div>
      </div>
    </div>
    <div class="col-xl-8">
      <div class="all-height">
        <div class="all-height__itme-two">
          <p>This unit with fixed height</p>
        </div>
        <!-- 添加all-height__inner-row类，让row变成flex容器占剩余高度 -->
        <div class="row align-items-stretch all-height__inner-row">
          <div class="col-lg-6">
            <div class="all-height__itme-four">
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.?</p>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="all-height__itme-five">
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, voluptatum hic modi unde laudantium quia officia totam maxime doloremque labore eius exercitationem harum minima deserunt aspernatur corporis enim beatae quis? </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键改动说明 #

1. .all-height改为Flex容器：设置display:flex; flex-direction:column; height:100%;，这样内部子元素可以垂直排列，并且容器会占满父级（col-xl-4/8）的高度
2. 滚动区块调整：去掉height:500px，添加flex-grow:1让它自动填充all-height里的剩余空间，同时设置overflow-y:auto实现内容超出时显示垂直滚动条
3. 右侧列的子容器优化：给row添加all-height__inner-row类，让它也变成垂直Flex容器并占剩余高度，确保里面的col-lg-6和内部的item4、item5能填满高度
4. item4和item5调整：把height:100%改成flex-grow:1，让它们在自己的col容器里填满剩余空间

这样调整后，左边的滚动区块会自动占据固定高度item1下方的所有剩余空间，右侧的两个区块也会填满item2下方的剩余空间，完全符合你的需求。

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