我的div大于窗口的宽度

Question

这是css的{​​{1}}。我希望背景能够填满整个屏幕，但它比我的屏幕分辨率要大，所以会出现一个底部滚动条

div

Answer 1

您可以使用box-sizing

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;

这使得当你添加填充，边距或边框时它不会影响宽度。 （这不适用于IE7及以下版本）

Answer 2

您正在为已经100％的宽度添加填充。

您需要做的事情（如果您使用百分比）是将填充更改为百分比并使其加起来达到100％。

例如：

padding:5%;
width:90%;

---

我还发现了一个替代方法，使用overflow：hidden来删除滚动条。这不会消除你的问题，因为填充仍然会溢出窗口，只是不明显。

html, body
{
    width:100%;
}

body
{
    overflow:hidden;
}

请参阅jsfiddle here。

Answer 3

如果有必要，请

删除padding，然后减少width。

尽量将它们保持在像

这样的百分比中

padding:5%; /*desired value*/
width:80%; /*desired value*/

当它们被添加时，它应该小于或等于100％。 如果您有margin，那么也请考虑一下。 （假设margin:5%;）

例如：

<----------------100%---------------->
  margin | padding|   div   |padding | margin
|<--5%-->|<--5%-->|<--80%-->|<--5%-->|<--5%-->| 

对于水平（宽度）或垂直（高度）调整，这是相同的。

Answer 4

这可能是由于身体的边缘和填充物。

将此块添加到您的身体以查看它是否有帮助：

body {
  margin: 0
  padding: 0
}

此外，您正在为已经100％的元素定义填充，使其大于正文。

Answer 5

由于不透明度为0的元素，通常会发生水平溢出。您也无法看到该元素，但会导致水平溢出。将以下代码添加到css。

body {
overflow-x: hidden;
}
.hidden-thing {
position: absolute;
left: 100%;
width: 50px;
height: 50px;
opacity: 0;
}