页面超出屏幕边缘

Question

这已经是我第二次遇到这个问题，我正在尝试解决它。我正在创建一个网站，并且刚刚开始。在CSS中，我将html和body标签的边距和填充设置为0，但页面超出了屏幕的右侧边缘。

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

我还尝试将overflow值设置为hidden，但是正如预期的那样，这只会去掉滚动条，而页面仍然超出了屏幕的右侧边缘。

有什么想法吗？

- The Duke Of Marshall שלום

---

没关系，我再看了一遍，明白你在说什么了。 - SAJ14SAJ

我在使用分辨率为1600x900的Internet Explorer 9进行查看。 - The Duke Of Marshall שלום

我相信你从sachleen那里得到的答案是正确的——注意填充。 - SAJ14SAJ

是的，一旦我弄清楚他所说的是导航“div”的宽度，我把它去掉了，就行了。谢谢你的帮助。 - The Duke Of Marshall שלום

Answer 1

您的元素除了100%的宽度之外还有填充(padding)。

Div元素会占据所有可用的水平空间，因此在这里实际上不需要使用宽度属性。删除它可以解决问题。此外，您可以更改元素的box-sizing属性。

box-sizing: border-box;

- sachleen

---

好的，我的当前CSS如下：html，body { margin: 0px; padding: 0px; }这就是导致问题的原因。 - The Duke Of Marshall שלום

好的，现在我明白了。我把导航 div 中的宽度去掉了，问题解决了。谢谢！ - The Duke Of Marshall שלום

box-sizing 是 CSS3 -- 希望你不必支持 IE 6。 - SAJ14SAJ

我支持IE 6，但需要额外的高费用。 - The Duke Of Marshall שלום

Answer 2

只需在navigation_bar div上删除width:100%即可。

- kennypu

---

谢谢你的帮助。问题已得到解决。 - The Duke Of Marshall שלום

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部分的代码，那么不必让其他人在您的网站上搜索它，这将更有帮助。

- Mike Brant

---

下次我会记住的。感谢你的提示，很抱歉给你添麻烦了。 - The Duke Of Marshall שלום

Answer 4

使用视口宽度时出现了同样的问题，但原因不同。

什么是视口？

浏览器的视口是可以看到网页内容的窗口区域。

它还包括滚动条！

因此，在body标签上使用视口宽度时，请记住100vw > 100%，因为滚动条的宽度包含在视口中，而使用百分比时则不包括。

body{
    width: 100%;
    /* Page does not extend. */
    
    width: 100vw;
    /* Page extends in width by the width of the scrollbar. */
}

- corken