CSS布局页面出现多余滚动条、左侧菜单高度适配问题求助

问题原因 #

• 你给左侧菜单.courses设置了height: 100%，这个高度是相对于父元素body的100%视口高度，而body内已经存在固定高度为90px的header元素，两个块级元素上下堆叠总高度为100%视口高度 + 90px，超出视口范围因此出现垂直滚动条。
• 你设置的box-sizing: border-box仅作用于元素自身的内边距、边框和高度计算，不会改变不同元素之间的高度叠加逻辑，所以调整这个属性无法解决问题。

解决方案 #

方案1：使用calc动态计算高度（适合header高度固定的场景） #

直接修改.courses的高度规则，手动减去header的固定高度即可：

.courses { 
    width: 350px;
    /* 替换原height: 100% */
    height: calc(100% - 90px);
    /* 可选：如果菜单内容超出高度，内部出现滚动条而非撑破布局 */
    overflow-y: auto;
    margin: 0;
    background-color: #DA0037;
}

方案2：使用flex弹性布局（更灵活，适配header高度变化的场景） #

给body添加flex布局规则，让子元素自动分配高度，不需要手动计算差值：

body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: auto;
    background-color: #444444;
    /* 新增以下两行 */
    display: flex;
    flex-direction: column;
}

.courses { 
    width: 350px;
    /* 替换原height: 100%，flex:1表示自动占满剩余高度 */
    flex: 1;
    /* 可选：菜单内容超出时内部滚动 */
    overflow-y: auto;
    margin: 0;
    background-color: #DA0037;
}

两种方案均可以实现预期效果，不会产生多余的页面滚动条。

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