Footer设置100%宽度但右侧缺失的问题求助

核心原因 #

1. .nav-footer 内部元素用了固定左右 margin，导致实际占据宽度超出父元素（footer），小分辨率下触发横向滚动后，footer 的 width:100% 仅对应视口宽度，而非整个文档的实际宽度，滚动时右侧内容被截断。
2. html 和 body 的 overflow 设置冲突，导致文档宽度计算异常。

具体修复步骤 #

1. 修正 html/body 的溢出设置

移除冲突属性，确保文档能正确横向滚动并计算实际宽度：

html, body {
    -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-x: auto; /* 允许横向滚动，确保文档宽度被正确识别 */
}

body::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隐藏滚动条 */
}

2. 重构 .nav-footer 的内边距方式

将内部元素的固定 margin 改为给 .nav-footer 添加左右 padding，避免内部元素超出父容器范围：

footer .nav-footer {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--blueish);
    padding: 0 165px; /* 用 padding 替代内部元素的 margin */
    box-sizing: border-box; /* 确保 padding 不会增加元素总宽度 */
}

footer .nav-footer img {
    margin-left: 0; /* 移除原有的左侧 margin */
}

footer .nav-footer button {
    margin-right: 0; /* 移除原有的右侧 margin */
}

3. 优化 footer 的宽度设置

块级元素默认宽度为父容器的100%，可移除冗余的 width:100%，或添加 min-width 确保其至少容纳内部内容：

footer {
    min-width: fit-content; /* 确保 footer 宽度足够容纳内部元素 */
}

可选：适配小屏幕的响应式调整 #

为避免小屏幕下固定边距导致内容拥挤，可添加媒体查询动态调整边距：

@media (max-width: 1200px) {
    .main {
        margin: 0 50px 50px;
    }
    footer .nav-footer {
        padding: 0 50px;
    }
}

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