html - 带填充的 CSS 固定页脚宽度

Question

作为一名业余 CSS 编码员，我试图消除“表格”综合症，但在让固定页脚正常工作方面遇到了一些问题。

我将页脚 DIV 设置为 100% 宽度，但由于 DIV 内部有 30 像素的填充，如果您明白我的意思，页脚将超过 100% 延伸 60 像素。

我该如何解决这个问题？

我的 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 的内容区域。 Padding 和 Border width 是在内容区域之外计算的。但是，您可以在页脚 DIV 中放置另一个 DIV，并将其填充设置为 30px，以保持外部 DIV 的 100% 宽度。

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

这应与 CSS2.0 兼容。 ;)