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）

Answer 3

请参阅此fiddle

从

中删除padding-left:5%

.footer {
    padding-left:5% 
}

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

因此，如果您希望15％填充仅将宽度设置为85％..

Answer 4

我补充说：

display: inline;

到.footer，它修复了问题，但你需要更改填充。

Answer 5

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

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

CSS页脚宽度：100％导致水平滚动

5 个答案:

请参阅此fiddle