带有水平滚动条的CSS

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

我已经尝试将 width:100% 添加到 body,html 以及 padding:0 和 margin:0 但仍然无法正常工作

Answer 1

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

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

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

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

如以下评论所述， block 级元素将自动占据其父项的整个宽度，因此删除此处的width:100%;，并留下在填充中，可能是一个有效的选项。

在某些情况下，您特别需要一个百分比宽度，特别是对于 float (我经常使用带有多列布局的流体来这样做)。

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

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

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