如何隐藏 HTML 页面底部的水平滚动条答案

【问题标题】：How to hide the horizontal scroll bar at the bottom of the HTML page如何隐藏 HTML 页面底部的水平滚动条
【发布时间】：2025-12-30 19:10:07
【问题描述】：

我的 HTML 页面底部有一个令人讨厌的水平滚动条：

到目前为止我已经试过了：

body {
    width: 900px;
    margin: auto;
    overflow-x: hidden;
}

但没有运气。

可以看到整个页面实现here。此外，您还可以查看正在运行的页面here。

【问题讨论】：

【解决方案1】：

问题不在body。它在您的div 中，其中包含id="main"。

你在那里添加了overflow-x: scroll;。有两种解决方案

在您的#main {} CSS 中：

解决方案一：如果要在内容溢出时添加滚动 如果您最初不想滚动，但是当内容溢出时您想要滚动，那么您可以将 overflow-x: scroll; 更改为 overflow-x: auto;

解决方案 2：如果您根本不想添加滚动条 如果您无论如何都不想滚动，那么您可以将overflow-x: scroll;更改为overflow-x: hidden;

查看开发者模式以供参考。

【讨论】：

【解决方案2】：

您可以在正文中添加max-width:100vw;。这使您的身体的最大宽度为屏幕尺寸的 100%。

body{
    max-width:100vw;
}

【讨论】：