Question

我的页脚，以及包装和正文，设置为100％页面宽度，但由于某种原因，页脚在右侧有一个小的（25px左右）间隙。我已经尝试将其从包装中移出，但这不起作用。正文已将边距和填充设置为0。标题没有这个问题。

有关如何解决这个问题的想法吗？

Answer 1

从width作品中移除#header：

#header {
    padding:5px;
    /* width: 100%; */
    background-color:#272727;
    height:100px;
    margin-bottom:30px;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;

}

这是因为paddings正在为元素添加额外的宽度，如果你在CSS中定义了一个：http://jsfiddle.net/w63Jk/2/

适用于IE，FF和Chrome。

信息：如果没有通过CSS定义其他宽度，则默认情况下，DIV等块元素始终具有其父级的完整可用宽度。

Answer 2

其他元素的填充可能会影响页脚的宽度。您应该验证body和html都有margin和padding设置为0：

*, html, body { margin: 0px; padding: 0px; }

如果这还没有解决问题，我会假设其他元素的继承/固有边距或填充都会让你的页脚陷入困境。（p，div等。）尝试在Firefox中打开您的网页并使用Firebug或Chrome并使用开发人员工具查看CSS可能会对您造成什么影响。

（需要考虑的另一件事：它可能是分层或继承问题吗？你有多个CSS文件吗？）

Answer 3

好的，这就是我做的事情

<强> HTML：

<html>
<body>
    <div id="wrapper">
        <div id="footer">
            Hii
        </div>
    </div>
</body>
</html>

CSS：

body{
background:red;
width:100%;
height:100%;
padding:0;
margin:0;}


#wrapper{background:green;
width:100%;
padding:0;
height:100%;
margin:0;
position:absolute;}

#footer {
background:#272727;
width:100%;
height:40px;
position:absolute;
bottom:0;
left:0;
margin-top:20px;
-webkit-box-shadow: 0 0px 20px  black;
-moz-box-shadow: 0 0px 20px black;
 box-shadow: 0 0px 20px  black;
}

它工作正常。检查您的代码并进行相应的更改。 Follow the link代码为jsFiddle。

页脚不会使用100％的宽度

3 个答案: