Html 在分辨率较小的屏幕上，我的网站总是有一个无用的水平滚动条

在分辨率较小的屏幕上，我的网站总是有一个无用的水平滚动条。 我想知道是否有人能给我一些建议，使我的网站更适合屏幕

如果您使用的是笔记本电脑，则很容易注意到水平滚动条向右移动得太远，仅为空白灰色。我的内容正确居中，但背景长度太长

下面是我的CSS作为背景和保存我的内容的容器

body {
width: auto;
margin: 0px 0px 0px 0px;
text-align:center;
background: #E8E8E8;
}

.page {
  box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.1);
  margin: 0 auto;
  height: 100%;
}

#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}

---

问题在于容器的大小

---

对于大多数小型显示器来说，1100像素有点太多了。即使分辨率为1080 x 720的屏幕也必须使用滚动条来显示剩余的20个像素。

首先。你为什么要在你的身体里加载大量的css/js

---

第二：您的容器div的宽度为1100像素，导致任何分辨率低于该宽度的滚动条。

您的#topnav导航面板似乎太宽，并且左偏移量为320像素。尝试使其宽度等于780px

在开发响应性设计时，使用

%

而不是

px

是一种很好的做法。由于您已硬编码宽度，因此屏幕大小始终小于1100px。 我建议您使用

#容器{
宽度：99%；
保证金：0自动；
背景：#ffffff；
}

另一个选项是将身体或容器的溢出设置为隐藏。这将为您删除滚动条

在css中尝试添加：

body{overflow-x:hidden;}

另一种方法是使用媒体查询根据本机屏幕大小调整容器大小。例如，如果在最大屏幕宽度为300px的移动设备上显示页面，您可以在css中添加以下内容

@media screen and (max-width:300px){
    #container{width:300px;}
}

您可能还想阅读这篇关于响应式设计的文章：

---

希望这能有所帮助

我认为他的问题在于，即使容器完全适合浏览器视口，滚动条也会出现。不过，对于任意数量的像素，任何分辨率较低的x维屏幕都必须添加水平滚动条。我承认，我没有检查网站的完整代码。你能解释一下关于“你身体中的css/js”的更多信息吗？在你的网站上，你在

标记后加载了很多javascript/css，而不是在

中加载。

。您应该在页面的

。

中加载css/javascript。快速提示：您可以将正文选择器中的边距样式更新为边距：0；