Question

我的主样式表中有这个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和填充：0和边距：0但仍无法正常工作

Answer 1

问题是你要将元素的宽度设置为100％，然后通过设置填充来添加它。您可以为这些元素设置box-sizing到border-box，这将导致填充进入宽度（但在IE7中不起作用），或者，您可以在这些元素中添加一个元素然后设置填充。

* {
    box-sizing: border-box;
}

http://jsfiddle.net/ryanbrill/mxk4T/

有关box-sizing的浏览器支持，请参阅http://caniuse.com/#search=box-sizing

Answer 2

截取大部分代码，你的问题组合是这样的：

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

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

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

如下面的评论中所述，块级项目将自动占据其父级的全部宽度，因此删除此处的width:100%;，并留在填充中，可能是有效选项。

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

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

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

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

Answer 3

肮脏的修复

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

jsFiddle example

css与水平滚动条

3 个答案: