html - 将元素的宽度设置为其父级的宽度加上其父级的填充

Question

我正在尝试创建一个元素，其一侧将与父侧对齐，而不管父级有多少填充。

通常，我知道父母的填充，所以我只有这样的东西：

<div style="padding: 20px">
    ...other contents...
    <footer style="margin: 0 -20px -20px"></footer>
</div>

这只有效，因为我知道父元素有一个padding: 20px.

有没有办法在不知道父级填充的情况下将页脚拉伸到适当的大小，而不需要 javascript？

jsfiddle在这里。

编辑：页脚需要使父容器变大以适应所有内容和页脚。因此，这position: absolute;可能行不通。

Answer 1

当你做填充时，你告诉它的内容扩展并不重要，在第二种情况下。在第一种情况下，您必须为两者添加填充，然后它们对齐。

为了解决我position:relative在父 div 中使用，然后在页脚中使用position:absolute。结果如下：http: //jsbin.com/arosuz/1/edit

何时在相对内容中使用 position :absolute ，告诉它现在它的内容将是他的父容器（相对）。

这里有一个很好的教程： http: //learnlayout.com/position.html

Answer 2

CSS：

article {
    background-color: #eee;
    margin: 20px;
    position:relative;

}
article:after{
    content:' ';
    display:block;
    width:1px;
    height:40px /* Height of footer */;
    clear:both;
}
footer {
    background-color: #ddd;
    position:absolute;
    text-align: center;
    width:100%;
    left:0;
    bottom:0;
    padding: 10px 0;

    /* this only works for a container with
     * padding: 20px;
     * How can this work for a container
     * any amount of padding, without
     * javascript? */
}

http://jsbin.com/arosuz/4/

Answer 3

如果您对父 div 填充 CSS 值感兴趣，您也可以使用它。

     var padding = $(this).parent("div").css("padding");