CSS 页脚宽度：100% 导致水平滚动答案

【问题标题】：CSS footer width:100% causes horizontal scrollCSS 页脚宽度：100% 导致水平滚动
【发布时间】：2014-10-14 06:20:33
【问题描述】：

我在给页脚 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/

【问题讨论】：

尝试在 html/body 上设置 margin: 0。看在上帝的份上，将z-index 设置为有意义的东西，例如2；我非常怀疑您的页面上有 99,999 层。
你可能需要box-sizing: border-box;，如果你真的只是对它填充视口感兴趣，你最好使用width: 100vw;而不是100%。

标签： html css

【解决方案1】：

为类页脚添加 100% 的宽度：.footer。这将解决您的问题。

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

【讨论】：

【解决方案2】：

我补充说：

display: inline;

到 .footer，它解决了问题，尽管您需要更改填充。

【讨论】：

【解决方案3】：

正如@Lal 所说，问题是由.footer 上的左侧填充引起的。

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

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

DEMO

编辑

好的，试试这个：

DEMO

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

【讨论】：

谢谢，这本来是一个更好的解决方案，但它不起作用:(
这对我有用。我在导致水平滚动的父容器上有一些额外的填充。

【解决方案4】：

只需从页脚中删除 100% 宽度并添加 right:0;反而。

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

（假设您拥有旧版浏览器的供应商前缀并且不支持低于 IE8 的浏览器，那么 box-sizing 规则也应该有效）

【讨论】：

谢谢，我试过了，但我还是做了一个滚动条jsfiddle.net/9gh3ht48/2
这个问题与页脚无关，因为您嵌套了一个引导程序 .row ，而它没有位于 .container 元素内。 .row 在导致滚动条的两侧都有 15px 的负边距。您应该有一个 .container 包装器，它具有 15px 的左右填充，以便吸收 .row 的负边距而不会导致滚动条。使用正确的结构，滚动条就会消失。
我还应该指出，问题从来都不是页脚，因为页脚和 .footer 是不同的元素，并且填充位于内部元素上，因此不会影响页脚的宽度。

【解决方案5】：

看到这个fiddle

从

中删除padding-left:5%

.footer {
    padding-left:5% 
}

当您为左侧填充添加 15% 时，可用的剩余宽度仅为 85%。但是您将宽度设置为 100%，这会导致页面水平滚动..

所以，如果您想要 15% 的填充，请将您的宽度设置为仅 85%..

【讨论】：