如何实现100%高度div并使ul可滚动，解决按钮覆盖问题？

我需要让#category_list div占满可用高度以适配不同屏幕，同时当内部ul内容过多时可以滚动。但当前实现出现了底部按钮覆盖div内容的问题，具体表现为列表区域底部被“Tjeter”和“Përfundo”按钮遮挡。

当前使用的代码如下：

HTML代码 #

<div id="category_modal_body" class="modal-body">
    <div id="category_filters" class="row">
        <div id="category_list" class="col-md-4">
            <ul>
               <li> ... </li>
            </ul>
        </div>
     </div>
 </div>
<div id="category_modal_footer" class="modal-footer">
    <div id="category_selected_path"></div>
    <div id="category_footer_buttons">
        <button type="button" id="add_another_category">Tjeter</button>
        <button type="button" id="add_category_path">Përfundo</button>
    </div>
</div>

CSS代码 #

#category_modal_body #category_list{
    padding: 0;
    height: 100%
}
#category_modal_body #category_list ul{
    list-style: none;
    padding: 0;
    margin: 0;
    height:100%;
    overflow:scroll;
}

问题根源是#category_list设置height:100%时，未考虑底部modal-footer的高度，导致modal-body区域与footer重叠。以下是两种可靠的修复方式：

方法一：Flex布局推荐方案 #

给包含modal-body和modal-footer的父容器添加flex布局，让body自动占据剩余空间，footer固定在底部：

/* 请根据实际DOM结构调整父容器选择器，示例假设父容器类名为modal-container */
.modal-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 让容器占满整个视口高度 */
}

#category_modal_body {
    flex: 1; /* 占据除footer外的所有剩余空间 */
    overflow: hidden; /* 防止内部元素溢出到footer区域 */
}

#category_modal_body #category_list{
    padding: 0;
    height: 100%
}
#category_modal_body #category_list ul{
    list-style: none;
    padding: 0;
    margin: 0;
    height:100%;
    overflow-y: auto; /* 仅在内容过多时显示垂直滚动条 */
}

方法二：calc计算高度方案 #

如果无法使用flex布局，可以通过calc直接计算modal-body的高度，减去footer的固定高度：

/* 请根据实际footer高度调整数值，示例假设footer高度为60px */
#category_modal_body {
    height: calc(100vh - 60px);
    overflow: hidden;
}

#category_modal_body #category_list{
    padding: 0;
    height: 100%
}
#category_modal_body #category_list ul{
    list-style: none;
    padding: 0;
    margin: 0;
    height:100%;
    overflow-y: auto;
}

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