绝对定位，忽略父填充 [英] Absolute positioning ignoring padding of parent
问题描述
如何使绝对定位的元素遵守其父元素的填充?我想要一个内部div延伸其父对象的宽度，并定位在该父对象的底部，基本上是一个页脚.但是孩子必须尊重父母的内向，而这并不是这样做的.将孩子直接压在父母的边缘上.
How do you make an absolute positioned element honor the padding of its parent? I want an inner div to stretch across the width of its parent and to be positioned at the bottom of that parent, basically a footer. But the child has to honor the padding of the parent and it's not doing that. The child is pressed right up against the edge of the parent.
所以我想要这个:
但是我得到了:
<html>
<body>
<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
<div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
</div>
</body>
</html>
我可以在内部div周围留一点空白，但是我不想不必添加它.
I can make it happen with a margin around the inner div, but I'd prefer not to have to add that.
推荐答案
首先，让我们看看为什么发生这种情况.
First, let's see why this is happening.
原因是令人惊讶的是，当一个框具有position: absolute时，其包含框是父级的填充框(即，其填充周围的框).这是令人惊讶的，因为通常(也就是说，在使用静态或相对定位时)包含框是父级的 content 框.
The reason is that, surprisingly, when a box has position: absolute its containing box is the parent's padding box (that is, the box around its padding). This is surprising because usually (that is, when using static or relative positioning) the containing box is the parent's content box.
这是 CSS规范的相关部分:
如果祖先是一个内联元素，则包含块是为该元素生成的第一个和最后一个内嵌盒的填充框周围的边界框....否则，包含块由祖先的填充边缘.
In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.... Otherwise, the containing block is formed by the padding edge of the ancestor.
如Winter的答案中所建议的那样，最简单的方法是在绝对定位的div上使用padding: inherit.但是，仅当您不希望绝对定位的div具有其自身的任何其他填充时，它才起作用.我认为最通用的解决方案(因为两个元素都可以有各自独立的填充):
The simplest approach—as suggested in Winter's answer—is to use padding: inherit on the absolutely positioned div. It only works, though, if you don't want the absolutely positioned div to have any additional padding of its own. I think the most general-purpose solutions (in that both elements can have their own independent padding) are:
-
在绝对定位的
div周围添加额外的相对定位的div(无填充).新的div将遵守其父级的填充，然后绝对定位的div将会填充其父级.
Add an extra relatively positioned
div(with no padding) around the absolutely positioneddiv. That newdivwill respect the padding of its parent, and the absolutely positioneddivwill then fill it.
当然，缺点是您只是出于演示目的而将HTML弄乱了.
The downside, of course, is that you're messing with the HTML simply for presentational purposes.
在绝对定位的元素上重复填充(或添加填充).
Repeat the padding (or add to it) on the absolutely positioned element.
这里的缺点是您必须在CSS中重复这些值，如果直接编写CSS，这将很脆弱.但是，如果使用的是SASS或LESS之类的预处理工具，则可以通过使用变量来避免该问题.这是我个人使用的方法.
The downside here is that you have to repeat the values in your CSS, which is brittle if you're writing the CSS directly. However, if you're using a pre-processing tool like SASS or LESS you can avoid that problem by using a variable. This is the method I personally use.
这篇关于绝对定位，忽略父填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
