如何解决CSS侧边栏背景无法延伸至页面最底部的问题

问题核心原因 #

你当前侧边栏仅设置了最小高度为视口高度减去顶部导航高度，当页面整体内容高度超过视口高度后，绝对定位的侧边栏高度不会同步跟随页面增长，因此滚动到页面下方时会出现背景中断的问题。

可选解决方案 #

根据你的交互需求可以选择以下任意一种方案实现：

方案1：固定悬浮侧边栏（滚动时侧边栏一直固定在左侧视野内）

直接修改.sidebar的CSS属性即可：

.sidebar {
    position: fixed; /* 将原有的absolute替换为fixed，让侧边栏固定在视口内 */
    background: #232428;
    min-height: calc(100vh - 59px);
    width: 220px;
    top: 59px; /* 对应你减去的顶部导航高度，保证侧边栏和导航对齐 */
    left: 0; /* 固定在页面左侧，可根据你的布局需求调整位置 */
}

方案2：侧边栏高度随页面内容自动延伸（无需固定悬浮）

如果你不需要侧边栏一直固定在视野里，只需要背景一直延伸到页面底部，用flex布局更稳妥：

1. 先给包裹侧边栏和右侧主内容的外层容器添加CSS：

/* 外层容器类名可根据你的实际代码调整，示例用.page-container */
.page-container {
    display: flex;
    align-items: stretch; /* 自动拉伸子元素保证等高 */
    min-height: calc(100vh - 59px); /* 最小高度占满视口剩余空间 */
}

2. 修改侧边栏的CSS属性：

.sidebar {
    /* 删除原有的position: absolute属性 */
    background: #232428;
    width: 220px;
    /* 删除原有的min-height属性，flex布局会自动适配高度 */
}

该方案下侧边栏高度会自动和页面最长内容的高度对齐，背景自然就能延伸到页面最底部。

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