侧边导航在100%与80%缩放层级显示异常的CSS修复咨询

问题描述 #

已实现可切换侧边导航，当前存在如下问题：当屏幕初始设置为100%缩放时，导航菜单占据整个屏幕高度；但缩放到80%时显示效果正常。

100%缩放效果：侧边导航菜单占满整个屏幕高度，底部按钮布局异常
75%缩放效果：侧边导航高度适配视口，底部按钮正常贴在侧边栏底部

问题根源分析 #

从提供的代码来看，导致高度异常的核心原因有三点：

• .layout-side-nav的width与min-width设置矛盾（width:200px却min-width:272px），实际宽度被强制拉伸，缩放时布局挤压引发高度计算错误；
• 侧边栏未设置最大高度限制，当菜单内容+头部+底部按钮的总高度超过视口时，会撑满整个屏幕；
• 底部添加数据按钮使用绝对定位，脱离文档流后无法参与正常高度计算，进一步打乱布局结构。

具体修改方案 #

1. 修正侧边栏宽度配置 #

统一侧边栏的width和min-width，同时限制最大高度为视口高度：

.index-main-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh; /* 明确父容器高度为视口高度 */
    .layout-side-nav {
        transition: all 0.5s ease;
        width: 272px; /* 与min-width保持一致 */
        min-width: 272px;
        max-height: 100vh; /* 限制侧边栏最大高度为视口 */
        background-color: #1d3666;
        overflow: hidden; /* 隐藏外部滚动，改用菜单内部滚动 */
    }
    .side-nav-closed {
        width: 80px; /* 关闭状态统一宽度 */
        min-width: 80px;
    }
}

2. 重构侧边栏内部为Flex垂直布局 #

让.main-layout-sidenav使用flex垂直布局，自动分配各模块空间，确保底部按钮始终贴底：

.main-layout-sidenav {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;

    .sidenav-header {
        padding: 1rem;
        .sidenav-header-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            /* 头部内部样式保留不变 */
        }
    }

    .sidenav-menu {
        flex: 1; /* 自动填充头部与底部按钮间的剩余空间 */
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 0 1rem 0;
        overflow-y: auto; /* 菜单内容过多时内部滚动 */
        /* 菜单内部样式保留不变 */
    }

    /* 移除绝对定位，改用margin-top:auto实现贴底 */
    .sidenav-add-data-btn {
        padding: 1rem;
        margin-top: auto;
        width: 100%;
    }

    /* 按钮样式保留不变 */
}

3. 优化滚动体验（可选） #

如果需要保留滚动条，可去掉.layout-side-nav::-webkit-scrollbar的display:none，或者针对菜单内部滚动条进行样式调整。

修改后效果 #

100%缩放时，侧边栏高度被限制在视口范围内，菜单内容超出时内部滚动，底部按钮始终贴在侧边栏底部，与80%缩放时的布局效果一致。

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