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

问题描述：

我试图创建一个元素，其侧面与父级的一侧排队，无论父级填充多少。将元素的宽度设置为其父级的宽度加上其父级的填充

通常情况下，我知道了父母的填充，所以我只希望有这样的事情：

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

这只是工作，因为我知道父元素有padding: 20px。

有没有办法将页脚伸展到合适的大小，而不知道父母的填充，没有javascript？

jsfiddle here。

编辑：页脚需要导致父容器变得更大，以适应所有的内容和页脚。因为这position: absolute;可能不会工作。

他们都是块元素，所以我只是1），把它们彼此，而不是一个在另一个内部的下方和2）给他们相同的课程，他们会出来相同。但是那太容易了，不是吗？ –

请参阅以下相关主题：https：//developer.mozilla.org/en-US/docs/Web/CSS/box-sizing – mike

框体大小无助于将页脚从其容器的内容区域取出，并仍能够迫使容器延伸以适应其高度。 –

答

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/

与Ligth的回答非常相似，但页脚变大时仍然存在问题。页脚将重叠上面的文本，而不是使容器变大。 – uber5001

啊，好吧，你没有提到你有一个可变高度页脚。考虑到您的所有假设，恐怕我不知道解决您的问题。您不能使用'position：absolute'，因为这会使页脚脱离正常流程，并且由于您不知道高度，因此无法模拟它是否让文章适应其大小。如果你不介意改变你的HTML，那将会简单得多。就像将文章主体放在自己的有填充物的容器中一样。 –

如果你不介意改变你的HTML，这里有一个解决方案：http://jsfiddle.net/NvQQL/2/ –

答

当你做填充时，你告诉它的内容扩大做什么事情在第二种情况下。在第一种情况下，你必须添加填充，然后他们排队。

要解决我在父DIV使用position:relative，然后在页脚我使用position:absolute。这里的结果：http://jsbin.com/arosuz/1/edit

当使用的位置是：绝对的相对含量内，告诉它，现在它的内容将成为他的父容器（亲属）。

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

'不同于其他元素，'position：absolute;'元素处理'width：100％'？ – uber5001

此外，在http://jsbin.com/arosuz/3/edit：我将页脚更改为半透明。它不是垂直排队。另外，当页脚很大时，这不会弄乱容器吗？ ...这与我所寻找的非常接近。 – uber5001

@ uber5001是的，绝对尊重它的名字，它所做的一切，它以自己的方式完成，而不考虑其他方面，但在某些情况下，不会影响任何元素和流程的完整保留。 – Ligth

答

如果你的兴趣在父DIV填充CSS值，你也可以用这个。

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

糟糕。对不起，忘了提及我不想使用JavaScript。我编辑了这个问题。谢谢你的回答！ – uber5001

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

相关推荐