1

我的页脚以及包装器和正文设置为 100% 页面宽度，但由于某种原因，页脚在右侧有一个小的（25 像素左右）间隙。我试过把它移出包装，但没有奏效。正文已经将边距和填充设置为 0。标题没有这个问题。

这是代码：http: //jsfiddle.net/w63Jk/

关于如何解决这个问题的任何想法？

4

3 回答 3

5

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;

}

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

适用于 IE、FF 和 Chrome。

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

于 2012-06-11T18:28:10.147 回答
0

其他一些元素的填充可能会影响页脚的宽度。您应该验证 body 和 html 的边距和填充设置为 0：

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

如果这不能解决它，我会假设某些其他元素的继承/固有边距或填充正在破坏您的页脚。( p, div, 等等。) 尝试在 Firefox 中打开您的网页并使用 Firebug 或 Chrome 并使用开发人员工具，看看哪些 CSS 可能会影响您。

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

于 2012-06-11T18:24:38.700 回答
0

好吧，这就是我所做的

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

它工作正常。检查您的代码并进行相应的更改。 按照jsFiddle 上的代码链接。

于 2012-06-11T18:25:29.870 回答