CSS页脚宽度:100%导致水平滚动

Question

我在给页脚100%宽度时遇到困难它导致水平滚动你能看到什么吗？当我降低100%它会在侧面形成一个橙色条,因为这是背景,我读到元素上有填充可能会导致它但我很确定我的页脚内容中没有任何填充吧所以有人可以帮帮忙吗？

/* CSS Document */

/*-- RESET | Based on Eric Meyer --*/

ol, ul {
    list-style: none;
    padding:0px;
}

li {
    line-height:25px;   
}
/*-- BODY BORDER --*/
.bt, .br, .bb, .bl { 
    background: white; position: fixed; z-index: 99999; 
}
.bl, .br {
    top: 0; bottom: 0; width: 5px; 
}
.bt, .bb {
    left: 0; right: 0; height: 5px; 
}
.bt { 
    top: 0; 
}
.br { 
    right: 0; 
}
.bb { 
    bottom: 0; 
}
.bl { 
    left: 0;
}


/*-- MAIN --*/
html, body { 
    height: 100%; 
}
body {
    text-transform: uppercase;
    background: #FCD9CA; 
}

.clear { 
    clear: both; overflow: hidden; 
}

.sidebar {
    padding: 15px 0;
    border-top: 1px solid black;
    border-bottom: 1px solid black; 
}

.sb-slider {

    padding-top:0px;
    margin-top:0px; 
}
.container {
    padding-bottom:100px;   
}


.logo {
    padding-left:15%;
    position:relative;
    top:125px;
    margin: 0 auto; 
}

.top {
    padding-left:5%;
    position:relative;
    top:200px;
    margin: 0 auto;
}

.footercontact {
    padding: 15px 0;
}
.footer {
    padding-left:5% 
}
footer {

    border-top: 1px solid black;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    background:#fff;
}

我已经做了一个小提示,向你展示问题 http://jsfiddle.net/9gh3ht48/2/

Answer 1

正如@Lal提到的那样,问题是由左侧填充引起的.footer.

我假设这个填充是您设计的必要部分,因此更好的解决方案是将box-sizing页脚的属性设置为border-box:

.footer {
    padding-left:5% 
    box-sizing: border-box;
}

DEMO

编辑

好试试这个:

DEMO

.footer {
   padding-left:5%;
   margin: 0;
}

Answer 2

只需从页脚中删除100%宽度并添加右:0; 代替.

该规则与left结合:0将确保元素跨越整个宽度,任何填充和边框都不会导致滚动.

(盒子大小规则也应该有效,假设您有旧浏览器的供应商前缀,并且不支持少于IE8)