如何消除窗口缩小时Navbar与下方图片间的间隙？

问题概述 #

页面顶部Navbar（使用绝对定位）下方的图片，在缩小浏览器窗口时两者之间出现明显间隙。已实现水平响应式布局，不希望用黑色背景遮盖间隙，后续将通过media queries完善响应式，需先解决间隙问题。

可行解决方案 #

方案1：调整.tre的位置与高度，匹配Navbar占用空间 #

Navbar使用position:absolute脱离文档流，下方的.tre默认从页面顶部开始布局，会被Navbar覆盖一部分；同时当视口高度较小时，.tre的90vh高度加上Navbar的15vh会超出视口，导致.tre被向下挤压出现间隙。调整方式：

• 给.tre设置margin-top:15vh，让它从Navbar下方开始布局
• 将.tre的高度改为calc(100vh - 15vh)，确保整体高度不超出视口
• 将align-items改为flex-start，避免垂直居中导致的顶部空白

修改后的CSS代码：

.tre {
    height: calc(100vh - 15vh); /* 替换原90vh */
    width: 99vw;
    overflow: hidden;
    display: inline-flex;
    align-items: flex-start; /* 替换原center */
    justify-content: space-between;
    margin-top: 15vh; /* 添加此属性 */
}

方案2：将Navbar改为固定定位，给body设置顶部内边距 #

如果希望Navbar始终固定在顶部，可将position:absolute改为position:fixed，同时给body添加顶部内边距，避免内容被Navbar遮挡：

.navbox {
    position: fixed; /* 替换原absolute */
    width: 100%;
    height: 15vh;
    background-color: #271f30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9999;
}

body {
    padding-top: 15vh; /* 添加此属性，让内容从Navbar下方开始 */
}

.tre {
    height: calc(100vh - 15vh); /* 调整高度适配视口 */
    width: 99vw;
    overflow: hidden;
    display: inline-flex;
    align-items: flex-start;
    justify-content: space-between;
}

方案3：仅移除垂直居中，让图片顶部对齐 #

原代码中.tre使用align-items:center，当窗口缩小、图片高度超过容器时，图片会垂直居中导致顶部出现间隙。将其改为align-items:flex-start，同时给.tre添加margin-top:15vh适配Navbar高度：

.tre {
    height: 90vh;
    width: 99vw;
    overflow: hidden;
    display: inline-flex;
    align-items: flex-start; /* 替换原center */
    justify-content: space-between;
    margin-top: 15vh; /* 配合Navbar的绝对定位 */
}

关键原因分析 #

• Navbar使用position:absolute脱离文档流，下方元素未考虑Navbar的高度占用，默认从页面顶部开始布局
• .tre的align-items:center会在图片高度超过容器时让图片垂直居中，产生顶部空白
• .tre的90vh高度加上Navbar的15vh超出视口高度，窗口缩小时会触发布局偏移

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