如何解决固定header与导航栏重叠的CSS布局问题

问题根因 #

CSS中垂直方向的margin/padding如果使用百分比值，默认是相对于父容器的宽度计算，你原本设置margin-top:20%的本意是对齐占高度20%的header，但实际计算出来的间距是基于页面宽度的20%，自然会出现空白过大或者错位的问题。

修复方案 #

直接使用定位元素的偏移属性top控制位置，同时修正导航和内容区域的尺寸，修改后的CSS如下：

#header {
    background-color: #3265C9;
    position: fixed;
    /* 用vh单位更稳妥，直接对应视口高度的20%，不受父元素影响 */
    height: 20vh;
    width: 100%;
    overflow-y: hidden;
    /* 固定定位元素默认z-index低，加个z-index避免被下方元素盖住 */
    z-index: 10;
}

#navigation {
    background: yellow;
    position: fixed;
    /* 直接用top对齐header底部，用和header高度一致的20vh */
    top: 20vh;
    /* 高度减去header占的20%，刚好填满剩余视口高度 */
    height: 80vh;
    width: 20%;
    text-align: center;
}

.navButton {
    display: block;
}

#content {
    background-color: red;
    position: absolute;
    /* 对齐header底部 */
    top: 20vh;
    right: 0;
    /* 宽度减去导航占的20%，刚好填满右侧区域 */
    width: 80%;
    text-align: center;
    /* 如果内容很长需要滚动，可以加个min-height */
    min-height: 80vh;
}

body {
    margin: 0px;
}

核心修改点说明 #

• 固定定位元素优先使用top/left等偏移属性控制位置，不要用margin做定位用，避免百分比计算逻辑不符合预期
• 导航栏高度修正为剩余视口高度，避免超出页面底部出现滚动条
• 给内容区域设置了明确的宽度，确保占满导航右侧的全部空间
• 新增了header的z-index，避免页面滚动时被下方内容盖住

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