html - 我的 div 大于窗口的宽度

Question

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

.hero-unit {
  padding:60px;
  margin-top: 60px;
  background: url("../img/bar2.jpg") no-repeat scroll 0;
  height:233px;
  width:100%;
  left:0px;
  background-size: cover;
  position:absolute;
  background-color:#eeeeee;
}

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%;

---

我还找到了使用溢出的替代方法：隐藏来删除滚动条。这不会解决您的问题，因为填充仍然会溢出窗口，只是不可见。

html, body
{
    width:100%;
}

body
{
    overflow:hidden;
}

请参阅此处的 jsfiddle 。

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;
}