下拉菜单展开被footer遮挡 如何实现页脚下移支持滚动

• 开发了点击菜单项即可展开对应商品描述的菜单组件，未展开任何菜单项时，菜单可整齐排布在页面header与footer之间
• 展开菜单项后，菜单内容的背景区域会被footer遮挡，仅文本内容显示在footer上方
• 核心需求：无论菜单项的描述内容是否展开，整个菜单上下都能保持一致的留白间距
• 已尝试方案：为各相关元素添加margin、padding属性保证内容与页脚的间距，未取得预期效果
• 实现细节：使用<details>标签实现每个菜单项的下拉展开区块，单菜单实际包含6个菜单项

Footer相关样式代码 #

.container {
    margin: 0 auto;
    position: relative;
    min-height: 100%;
    height: 5%;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

/* FOOTER */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    flex-shrink: 0;
    text-align: center;
    background: #1D3557;
    color: #F1FAEE;
    box-shadow: 0px -10px 10px 0px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.footer-col {
    width: 33.3333%;
    font-size: 90%;
    padding: 5px;
}

菜单元素相关样式代码 #

.menu-card {
    position: relative;
    width: 70%;
    min-height: 80%;
    height: auto;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 10px;
    
}

.menu-items {
    position: absolute;
    width: 110%;
    min-height: 70%;
    height: auto;

    padding: 10px;
    color: white;
    font-size: 1.1rem;

    top: 25%;
    left: 50%;
    transform: translate(-50%);

    background: #1d3557;
    border-radius: 10px;

    justify-content: space-around;
}

页面结构代码 #

<div class="menu-card" id="dairy-menu">
    <h1><b>Dairy Items</b></h1>
    <div class="menu-items">
        <details>
            <summary>Dairy Item #1</summary>
            <span>
                <p>Dairy Item #1 description.</p>
                <button type="button">Add Calories</button>
            </span>
        </details>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="footer-col">
                <h4>Developer</h4>
            </div>

            <div class="footer-col">
                <h4><a href="/contact.html">Contact Us</a></h4>
            </div>

            <div class="footer-col">
                <h4>Counter</h4>
            </div>
        </div>
    </div>
</footer>

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