Question

我希望在我的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;
}

文档说当我在div中使用display:block时，这个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%以及padding:10px的问题在于它产生的div比父对象大20px，并且水平滚动条会出现！

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

Answer 1

有三种方法：

没有水平填充：

padding: 10px 0;

绝对定位在右边：

right: 0;

或更改页脚的大小调整：

box-sizing: border-box;

有关框大小调整的更多说明，请参阅此处：http://css-tricks.com/box-sizing/

Answer 2

我认为这可能是因为div有position:absolute。尝试将right:0px;添加到body .footer的样式中。如果重要的话，我认为这不会在IE6中有效。

请参阅我的jsfiddle（将红色背景添加到div以获取可见性）：http://jsfiddle.net/jdwire/BtnXe/

使div自动填充水平父div

2 个答案: