Question

作为一名业余的CSS编码器，试图消除“桌面”综合症，我遇到了一些固定页脚正常工作的问题。

我的页脚DIV设置为100％宽度，但因为DIV内部有一个30像素的填充，如果您知道我的意思，页脚将延伸60像素超过100％。

我该如何解决这个问题？

我的CSS是这样的：

#footerDiv {
background:url(../images/background/mainBG.gif);
margin:0 auto;
padding:15px 30px;
width:100%;
bottom:0;
left:0;
z-index:4;
position:fixed
}

Answer 1

使用CSS设置元素的宽度时，它仅设置DIV的内容区域。填充和边框宽度在内容区域之外计算。但是，您可以在页脚DIV中放入另一个DIV，并将其填充为30px，以保留外部DIV的100％宽度。

<DIV style="width:100%">
   <DIV style="padding:30px">
       <!-- Actual footer content -->
   </DIV>
</DIV>

这将与CSS2.0兼容。 ;）

Answer 2

这听起来像是一个盒子模型问题。有关详细信息look here。

使其正确的代码看起来像这样，

.footer {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}

由于它对我更有意义，我有时会将其应用于网页上的所有元素（即将.footer替换为*）。

CSS固定页脚宽度与填充

2 个答案: