Question

我正在尝试创建一个元素，其边将与父节点对齐，无论父节点有多少填充。

通常情况下，我知道父母的填充，所以我只是这样：

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

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

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

jsfiddle here

编辑：页脚需要使父容器变大，以适应所有内容和页脚。因为position: absolute;可能无法工作。

Answer 1

当你进行填充时，你告诉它的内容扩展doest就像第二种情况一样。在第一种情况下，您必须向两者添加填充，然后它们排成一行。

要解决我在父div中使用position:relative，然后在页脚中使用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");

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

3 个答案: