4

这是我第二次遇到这个问题，我正要拔头发试图修复它。我正在创建一个网站，并且刚刚起步。在 css 中，我将htmlandbody标记的边距和填充设置为 0，并且页面超出了屏幕的右边缘。

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

我还尝试将overflow值设置为隐藏，但正如预期的那样，这只带走了滚动条。很明显，页面仍然超出了屏幕的右边缘。

有什么想法吗？

4

4 回答 4

4

除了 100% 宽度之外，您还有一个填充。

在此处输入图像描述

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

box-sizing: border-box;
于 2012-11-22T00:53:45.000 回答
3

只需删除 navigation_bar div 上的 width:100%

于 2012-11-22T00:55:49.867 回答
1

这是你的问题：

#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 部分放在您的问题中会很有帮助，以免人们通过您的网站挖掘来获取它。

于 2012-11-22T00:57:21.703 回答
0

使用视口宽度时出现相同问题的不同原因。

什么是视口？

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

它还包括滚动条！

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

body{
    width: 100%;
    /* Page does not extend. */
    
    width: 100vw;
    /* Page extends in width by the width of the scrollbar. */
}
于 2022-03-03T01:05:08.460 回答