我的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

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

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