如何让右侧列高度与左侧输入列一致并实现滚动？

要实现左侧表单高度自适应、右侧列表与左侧等高且内容超出时滚动，只需调整以下几点：

• 利用Bootstrap flex布局特性，外层row下的col默认会自动拉伸至同高度，无需额外设置
• 右侧包裹列表的容器需占满父列高度，并开启垂直滚动
• 修正HTML结构中的嵌套label错误（HTML不允许label嵌套label）

修改后的代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="row mt-4">
  <div class="col-lg-6">
    <div class="row gy-2">
      <div class="col-12">
        <!-- 更多表单字段 -->
        <div class="form-floating">
          <input class="form-control" name="test" id="test" maxlength="255" type="text" value="TEST">
          <label for="test">Test</label>
        </div>
      </div>
      <!-- 可添加更多表单行 -->
      <div class="col-12">
        <div class="form-floating">
          <input class="form-control" name="test2" id="test2" maxlength="255" type="text" value="TEST 2">
          <label for="test2">Test 2</label>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="h-100 overflow-y-auto">
      <ul class="list-group mb-0">
        <!-- 更多列表项 -->
        <li class="list-group-item">
          <input class="form-check-input" name="item1" type="checkbox" value="" id="item1">
          <label class="form-check-label" for="item1">选项 1</label>
        </li>
        <li class="list-group-item">
          <input class="form-check-input" name="item2" type="checkbox" value="" id="item2">
          <label class="form-check-label" for="item2">选项 2</label>
        </li>
        <li class="list-group-item">
          <input class="form-check-input" name="item3" type="checkbox" value="" id="item3">
          <label class="form-check-label" for="item3">选项 3</label>
        </li>
        <!-- 重复添加更多选项以测试滚动 -->
        <li class="list-group-item">
          <input class="form-check-input" name="item4" type="checkbox" value="" id="item4">
          <label class="form-check-label" for="item4">选项 4</label>
        </li>
        <li class="list-group-item">
          <input class="form-check-input" name="item5" type="checkbox" value="" id="item5">
          <label class="form-check-label" for="item5">选项 5</label>
        </li>
        <li class="list-group-item">
          <input class="form-check-input" name="item6" type="checkbox" value="" id="item6">
          <label class="form-check-label" for="item6">选项 6</label>
        </li>
        <li class="list-group-item">
          <input class="form-check-input" name="item7" type="checkbox" value="" id="item7">
          <label class="form-check-label" for="item7">选项 7</label>
        </li>
      </ul>
    </div>
  </div>
</div>

关键说明 #

• h-100：让列表容器占满父列全部高度，确保与左侧表单高度一致
• overflow-y-auto：当列表内容超出容器高度时自动显示垂直滚动条
• mb-0：移除列表默认的底部外边距，避免容器出现不必要的滚动条
• 修正嵌套label问题，改用li作为列表项容器，符合HTML规范

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