flex布局实现底部固定高度顶部自适应并小屏显滚动条方案咨询

需求与现状 #

• 实现两行布局：底部区域高度固定，顶部区域占据剩余空间，小屏幕下顶部区域显示滚动条
• 顶部展示数量可变的购物车商品，底部包含会员信息、购物车总价及操作按钮，底部精确高度已知
• 尝试sticky属性无效，现有代码在桌面及大屏手机端正常，但小视口下布局失效

原HTML结构 #

<div class="cart_wrapper">
    <div class="mini_cart_info_wrapper">
        <ul class="woocommerce-mini-cart">
        </ul>
    </div>

    <div class="price_buttons_area">
        <div class="mini_cart_membership_info">
        </div>

        <p class="woocommerce-mini-cart__total total">
        </p>

        <p class="woocommerce-mini-cart__buttons buttons">
            <?php do_action( 'woocommerce_widget_shopping_cart_buttons' ); ?>
        </p>
    </div>
</div>

修改后的CSS代码 #

.cart_wrapper {
    display: flex;
    flex-direction: column;
    /* 核心：给容器设置明确高度，否则flex无法计算剩余空间 */
    height: 100vh; /* 可根据实际场景调整为父容器高度或固定值 */
    overflow: hidden; /* 避免整体滚动 */
}

.mini_cart_info_wrapper {
    flex: 1 1 auto;
    overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

.price_buttons_area {
    flex: 0 0 250px; /* 替换为你已知的底部精确高度，比如250px */
}

.price_buttons_area > .mini_cart_membership_info {
    padding: 20px;
}

.price_buttons_area > .mini_cart_membership_info > p {
    margin-bottom: 20px;
}

关键修改说明 #

• 给容器设置明确高度：原代码未给.cart_wrapper设置高度，小视口下flex无法计算剩余空间，导致flex:1不生效，这是布局失效的核心原因。用height:100vh可让容器占满视口高度，也可根据父容器实际高度调整。
• 移除不必要的flex属性：原.mini_cart_info_wrapper里的嵌套flex属性多余，直接保留flex:1让它占据剩余空间即可。
• 固定底部高度：用flex:0 0 [精确高度]替代原flex:0 1 auto，确保底部高度严格固定，不受内容影响。
• 添加滚动条：给.mini_cart_info_wrapper加overflow-y:auto，小屏幕下商品数量过多时自动显示垂直滚动条。

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