1

我的主样式表中有这个 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 但仍然无法正常工作

4

3 回答 3

1

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

* {
    box-sizing: border-box;
}

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

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

于 2013-04-12T00:02:19.637 回答
1

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

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

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

这样做的结果是你的标题占用的总空间是 100% + 20px，它总是比屏幕宽。

正如下面评论中所指出的，块级项目将自动占据其父项的整个宽度，因此删除width:100%;此处并保留填充可能是一个有效的选择。

在某些情况下，您特别需要百分比宽度，特别是对于浮动（我经常使用多列布局的流体）。

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

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

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

于 2013-04-12T00:03:19.000 回答
0

肮脏的修复

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

jsFiddle 示例

于 2013-04-11T23:59:19.160 回答