如何在视口（viewport）缩小时消除网页水平滚动条

问题根源分析 #

1. HTML结构不规范：header标签位于body外部，导致浏览器渲染布局时宽度计算异常。
2. 导航栏未设置换行规则，窗口缩小时子元素总宽度超出容器范围。
3. 主页按钮区域未配置自适应换行，小屏幕下按钮无法自动换行引发横向溢出。

具体修复步骤 #

1. 修正HTML结构

将<header>标签移动到<body>内部，符合标准HTML文档结构：

<body>
<header>
    <!-- 原header内容 -->
</header>
<div class = "main-home">
    <!-- 原main-home内容 -->
</div>
<!-- 原body其他内容 -->
</body>

2. 优化导航栏样式

给.topnav添加换行规则，确保窗口缩小时元素自动换行：

.topnav{
    width: 100%;
    height: calc(100vh / 10);
    background-color: #2B78E4;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 添加自动换行 */
    box-sizing: border-box; /* 避免内边距影响宽度计算 */
}

3. 调整主页按钮区域样式

给按钮容器添加flex布局和换行规则，同时优化小屏幕下的按钮内边距：

.main-home .main-btns{
    display: flex;
    gap: 10px; /* 按钮间添加间距 */
    justify-content: center;
    flex-wrap: wrap; /* 小屏幕自动换行 */
}

.main-home .main-btns a{
    text-decoration: none;
    color: black;
    padding: 70px 40px;
    font-size: 18px;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
    .main-home .main-btns a{
        padding: 35px 20px;
        font-size: 16px;
    }
}

4. 移除冗余浮动样式

导航栏使用flex布局后，移除按钮的float属性，避免排版冲突：

#login-btn{
    position: relative;
    display: inline-block;
    margin-left: auto;
}
#signUp-btn{
    position: relative;
    display: inline-block;
    padding-left: 20px;
}
/* 删除以下冗余代码 */
/* #login-btn, #signUp-btn {
    float: right;
} */

兜底补充方案 #

若仍有溢出情况，给body添加横向溢出隐藏：

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Helvetica", sans-serif;
    background-color: #666666;
    overflow-x: hidden; /* 横向溢出隐藏 */
}

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