带有水平滚动条的css

我的主样式表中有这个CSS 是否可以从此CSS中删除水平滚动条：

html, body, #wrap {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-family:Calibri;
}
#wrap {
    height: auto;
    min-height: 100%;
}

/* header stuff */
#header-topbar {
    width:100%;
    height:30px;
    padding:10px 10px 10px 10px;
    background-color:#666666;
}
#header-topbar2 {
    width:100%;
    height:80px;
    padding:10px 10px 10px 10px;
    background-color:#eeeeee;
}
#phone-tel {
    position:block;
    float:right;
    margin-right:16%;
    margin-top:5px;
    font-size:20px;
}
#logo {
    position:absolute;
    float:left;
    margin-left:15%;
    margin-top:0px;
}

/* main body/content */
#body-content {
    padding-bottom:200px;
    width:70%;
    margin:120px auto 0 auto;
    padding:10px 10px 10px 10px;
    border:solid 1px #a79494;
    border-top:solid 4px #a2cd3a;
}

/*footer */
#footer .column {
    margin-top:-200px;
    clear:both;
    float: left;
    width: 25%;
}

#footer .column div {
    margin: 5px;
    height: 200px;
    background: #eeeeee;
}

我已经尝试将宽度：100%添加到正文、html以及padding:0和margin:0，但仍然无法正常工作

  html, body, #wrap {
    overflow-x:hidden;
    }

---

问题在于，您将元素的宽度设置为100%，然后通过设置填充来增加宽度。您可以为这些元素设置

框大小

为

边框框

，这将导致填充进入宽度内（但在IE7中不起作用），或者，您可以在这些元素内添加一个元素，然后设置填充

* {
    box-sizing: border-box;
}

---

有关浏览器对框大小调整的支持，请参见剪掉大部分代码，您的问题组合如下：

#header-topbar {
    width:100%;
    padding:10px 10px 10px 10px;
}

width: 95%
padding-left:2.5%;
padding-right:2.5%;

将宽度定义为内容的宽度，并在内容周围添加边距和填充

结果是，标题占用的总空间为100%+20px，始终比屏幕宽

如以下注释所述，块级项目将自动占据其父级的全部宽度，因此删除

宽度：100%

在这里，并保留在填充中，可能是一个有效的选项

在某些情况下，您特别需要百分比宽度，尤其是浮点数（我经常使用流体、多列布局）

当需要百分比宽度时，我对填充问题的标准解决方案看起来有点像这样：

#header-topbar {
    width:100%;
    padding:10px 10px 10px 10px;
}

width: 95%
padding-left:2.5%;
padding-right:2.5%;

---

请注意，我们用相同的单位指定了填充和宽度，总和为100%（95+2.5+2.5=100）

如果可能，请包括您的HTML和a。抱歉-小提琴在这里，我删除了

#header-topbar

和

#header-topbar2

上的宽度。这似乎奏效了。这是一个很好的观点，我将把块级元素的默认“全宽度”行为合并到答案中。