页面延伸到屏幕边缘

Question

这是我第二次遇到这个问题而我正要试着修理它。我正在创建一个网站，并刚刚开始。在css中，我将html和body标记的边距和填充设置为0，页面延伸到屏幕的右边缘。

我尝试修改这些元素的css以包含100％宽度，但水平滚动条仍然存在且页面仍然超出屏幕边缘。

我还尝试将overflow值设置为隐藏，但正如预期的那样，只会删除滚动条。很明显，页面仍然延伸到屏幕的右边缘。

有什么想法吗？

Answer 1

除100％宽度外，还有填充。

Div元素占用了所有可用的水平空间，因此您不需要这里的width属性。把它拿出来可以解决这个问题。此外，您可以更改元素的box-sizing属性

box-sizing: border-box;

Answer 2

只需删除导航栏上的宽度：100％

Answer 3

这是你的问题：

#navigation_bar {
    background-color:#900;
    height:50px;
    left:0px;
    padding-right:10px;
    text-align:right;
    top:0px;
    width:100%;
    z-index:0;
}

在100％宽度的元素上有填充，可以扩展主体的整个宽度。删除填充，您的#navigation_bar元素将适合而不滚动。或者，只需删除width: 100%，因为div会自然增长以填充与容器（在这种情况下为body）允许的水平空间。

顺便说一句，将HTML和CSS部分放在你的问题中是有帮助的，这样就不会让人们通过你的网站来获取它。