1

我想在我的 html 正文中有一个水平填充正文的页脚。

我有一个这样的html：

<body>
    <div class="footer"></div>
</body>

和这样的CSS：

body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}
body .footer {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: auto;
    padding: 10px;
}

文档说，当我display:block在 div 中使用时，默认情况下，这个 div 会水平填充父级。我不知道为什么，但这并没有发生在这里！所以我改变了这样的CSS：

body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}
body .footer {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: auto;
    padding: 10px;
}

现在width:100%除了 a 之外的问题padding:10px是它会产生一个比父级大 20px 的 div，当然还有一个水平滚动条！

有没有标准的方法来实现这一点？

4

2 回答 2

4

有以下三种方法：

没有水平填充：

padding: 10px 0;

绝对定位在右边：

right: 0;

或更改页脚的框大小：

box-sizing: border-box;

有关 box-sizing 的更多说明，请参见此处：http: //css-tricks.com/box-sizing/

于 2012-11-16T19:05:09.730 回答
2

我认为这可能是因为 div 有一个position:absolute. 尝试添加right:0px;到body .footer. 我不认为这将在 IE6 中起作用，但如果这很重要。

查看我的 jsfiddle（为 div 添加了红色背景以提高可见性）：http: //jsfiddle.net/jdwire/BtnXe/

于 2012-11-16T19:05:12.470 回答