如何基于Bootstrap 5设置表格最大高度为相邻另一元素的高度

你可以直接用Bootstrap 5自带的Flex布局工具类实现需求，不需要写复杂的自定义CSS，仅需要对原HTML结构做少量调整：

核心修改点 #

• 给右侧存放表格、删除按钮的col-lg-6容器添加垂直Flex布局，让内部元素可自动分配高度
• 在表格外层新增一个滚动容器，配置自动填充剩余高度、溢出自动滚动的属性
• 给表头添加粘性定位，滚动时表头固定在顶部不随内容位移

修改后的代码示例 #

<div class="row">
    <div class="col-lg-6">
        <div class="row">
            <div class="col-lg-6">
                <div class="mb-3">
                    <label for="the_select" class="form-label">Variable Name</label>
                    <select class="form-select" id="the_select">
                        <option selected>Open this select menu</option>
                        <option value="One">One</option>
                        <option value="Two">Two</option>
                        <option value="Three">Three</option>
                        <option value="Other">Other</option>
                      </select>
                  </div>                                            

                  <div class="mb-3">
                    <label for="the_value_field" class="form-label">Value For Variable</label>
                    <input type="text" class="form-control" id="the_value_field">
                  </div>                                            

                  <div class="mb-3">
                    <label for="custom_field" class="form-label">Custom Field</label>
                    <input type="text" class="form-control" id="custom_field">
                  </div>                
                  
                  <button class="btn btn-primary">Add Key-Value Pair</button>
            </div>
            <div class="col-lg-6 d-flex flex-column" style="min-height: 0;">
                <!-- 表格滚动容器 -->
                <div class="flex-grow-1 overflow-y-auto mb-3" style="min-height: 0;">
                    <table class="table table-hover">
                        <thead class="table-light sticky-top">
                            <tr>
                              <th scope="col">Key</th>
                              <th scope="col">Value</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                                <td>Name 1</td>
                                <td>Value 1</td>
                             </tr>
                            <tr>
                               <td>Name 1</td>
                               <td>Value 1</td>
                            </tr>
                            <tr>
                                <td>Name 1</td>
                                <td>Value 1</td>
                             </tr>
                             <tr>
                                <td>Name 1</td>
                                <td>Value 1</td>
                             </tr>
                            <tr>
                               <td>Name 1</td>
                               <td>Value 1</td>
                            </tr>
                            <tr>
                                <td>Name 1</td>
                                <td>Value 1</td>
                             </tr>
                             <tr>
                                <td>Name 1</td>
                                <td>Value 1</td>
                             </tr>
                            <tr>
                               <td>Name 1</td>
                               <td>Value 1</td>
                            </tr>
                            <tr>
                                <td>Name 1</td>
                                <td>Value 1</td>
                             </tr>
                             <tr>
                                <td>Name 1</td>
                                <td>Value 1</td>
                             </tr>
                            <tr>
                               <td>Name 1</td>
                               <td>Value 1</td>
                            </tr>
                            <tr>
                                <td>Name 1</td>
                                <td>Value 1</td>
                             </tr>
                             <tr>
                                <td>Name 1</td>
                                <td>Value 1</td>
                             </tr>
                            <tr>
                               <td>Name 1</td>
                               <td>Value 1</td>
                            </tr>
                            <tr>
                                <td>Name 1</td>
                                <td>Value 1</td>
                             </tr>                                                                                                                                                                                                        
                          </tbody>
                    </table>
                </div>   
                <button class="btn btn-primary mt-auto">Remove Selected</button>
            </div>
        </div>
    </div>
</div>

实现原理 #

1. Bootstrap 5的行默认使用Flex布局，同一行下的列默认等高，右侧列会自动适配左侧表单区域的高度
2. 右侧列设置d-flex flex-column后，内部元素变为垂直排列，flex-grow-1让滚动容器自动占满除删除按钮外的所有剩余高度
3. overflow-y-auto实现内容超出容器高度时自动显示垂直滚动条
4. 表头添加sticky-top实现滚动时表头固定，min-height:0用于解决Flex布局下子元素默认最小高度等于内容高度的问题，避免容器被内容撑破。

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