导航栏右侧出现白色边缘/区块如何解决？（HTML前端问题）

问题根源 #

1. .background类设置了width:100vw加上padding-left:5vw，实际总宽度达到105vw，超出视口范围，导致右侧出现空白并触发横向滚动条。
2. height:100vh是视口高度，叠加导航栏自身高度后，页面总高度超过视口，出现纵向滚动条。
3. 分开给导航栏和背景div设置同一张背景图，既容易出现对齐偏差，也造成资源重复加载。

方案一：统一背景到body（推荐） #

把背景图直接设置在body上，导航栏无需单独添加背景，实现整个页面背景统一：

/* 重置页面默认边距，消除浏览器默认样式干扰 */
body {
    margin: 0;
    padding: 0;
    background-image: url("images/Background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh; /* 确保背景覆盖整个视口高度 */
}

.menu-navigation-basic {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: right;
    padding-right: 5%;
    padding-bottom: 10px;
    padding-top: 10px;
    /* 移除导航栏单独的背景图设置 */
}

.menu-navigation-basic a {
    color: #809098;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    margin: 0 20px auto;
    line-height: 2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 10px;
    padding-top: 10px;
}

/* 修改原.background为内容容器，不再承担背景作用 */
.background {
    padding-left: 5vw;
    min-height: calc(100vh - 42px); /* 减去导航栏高度（可根据实际显示效果调整数值），避免纵向滚动 */
}

方案二：修复.background的尺寸计算（保留分开背景） #

如果必须保留导航栏和背景div的独立背景，通过以下修改解决溢出问题：

.menu-navigation-basic {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: right;
    padding-right: 5%;
    padding-bottom: 10px;
    padding-top: 10px;
    background-image: url("images/Background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0; /* 移除默认边距，避免额外间距 */
}

.menu-navigation-basic a {
    color: #809098;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    margin: 0 20px auto;
    line-height: 2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 10px;
    padding-top: 10px;
}

.background{
    background-image: url("images/Background.jpg");
    width: 100%; /* 用100%替代100vw，避免视口滚动条影响宽度计算 */
    min-height: calc(100vh - 42px); /* 减去导航栏高度，避免页面总高度超出视口 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.9;
    position: relative;
    padding-left: 5vw;
    box-sizing: border-box; /* 让padding包含在width内，不会增加元素总宽度 */
    margin: 0;
}

关键修改点 #

• 添加box-sizing: border-box：让元素的padding和border包含在设置的width/height内，避免宽度溢出。
• 替换100vw为100%：100vw包含视口滚动条宽度，容易导致横向溢出，100%则基于父容器宽度计算，更准确。
• 使用calc(100vh - 导航栏高度)：抵消导航栏的高度，确保页面总高度不超过视口，消除纵向滚动条。
• 重置默认margin：移除浏览器给元素添加的默认边距，避免额外间距导致的布局偏差。

内容的提问来源于stack exchange，提问作者Sub-x Cubing