忽略父级填充的绝对定位
如何使一个绝对定位的元素尊重其父元素的填充？我想要一个内部div跨越其父级的宽度，并位于其父级的底部，基本上是一个页脚。但孩子必须尊重父母的抚育，而孩子却没有这样做。孩子被压在父母的边缘上。
所以我想要这样:
但我明白了:
<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周围的边距来实现它，但我更希望不必添加该边距。
共有3个答案
嗯，这可能不是最优雅的解决方案（语义上），但在某些情况下，它不会有任何缺点:在父元素上使用透明边框而不是填充。绝对定位的子元素将尊重边框，并且将呈现完全相同的边框（除了使用父元素的边框进行样式化）。
您可以尝试使用以下CSS:
.child-element {
padding-left: inherit;
padding-right: inherit;
position: absolute;
left: 0;
right: 0;
}
它允许子元素从父元素继承padding，然后子元素的位置可以匹配父元素widht和padding。
另外，我使用box-sizing:border-box；来处理所涉及的元素。
我没有在所有浏览器中测试过这一点，但它似乎在Chrome，Firefox和IE10中都能工作。
首先，让我们看看为什么会出现这种情况。
原因是，令人惊讶的是，当一个框具有position:absolute时，它的包含框是父框的填充框（即围绕其填充框的框）。这是令人惊讶的，因为通常（即，当使用静态或相对定位时）包含框是父级的内容框。
下面是CSS规范的相关部分:
在祖先是内联元素的情况下，包含块是围绕为该元素生成的第一个和最后一个内联框的填充框的边界框。。。。否则，包含块由祖先的填充边形成。
最简单的方法--正如Winter的答案中所建议的--是在绝对定位的div上使用padding:inherit。但是，只有当您不希望绝对定位的div有任何额外的填充时，它才起作用。我认为最通用的解决方案是:
>
在绝对位置的div周围添加一个额外的相对位置的div（没有填充）。新的div将尊重其父级的填充，然后绝对定位的div将填充其父级。
当然，其缺点是，您只是为了表现的目的而对HTML进行了修改。
在绝对定位的元素上重复填充（或添加）。
这里的缺点是，您必须重复CSS中的值，如果您直接编写CSS，这是脆弱的。但是，如果您正在使用诸如sass或less之类的预处理工具，则可以通过使用变量来避免该问题。这是我个人使用的方法。
-
我在另一个div中有两个div，我想使用CSS将一个子div放置在父div的右上方，另一个子div放置在父div的底部。例如，我想对两个子div使用绝对定位，但是相对于父div而不是页面定位它们。我怎么能这么做？ HTML示例：
-
我想有一个垂直的菜单，有一个特定的高度。 每个子级必须填充父级的高度并具有中间对齐的文本。 孩子的数量是随机的，所以我必须使用动态值。 Div包含随机数的子级()，这些子级总是必须填充父级的高度。为了实现这一点，我使用了FlexBox。 为了使链接中的文本对齐，我使用了技术。但是使用表格显示需要使用100%的高度。 我的问题是在webkit（Chrome）中不工作。 有解决此问题的方法吗？ 或者是
-
我的TabPane似乎只能水平填充其宽度，而不能垂直填充。我现在的解决方法是这样做: 但是，如果我使用该高度，它显然比实际保留的区域大（在TabPane上方有一个菜单栏）。（或者它是否适当地调整了它的大小？它也有点感觉不对，我必须设置简单的布尔值，因为它的行为完全符合水平变化的预期。 场景是这样设置的: 当然还有更多的代码，但它只包含与拖放相关的侦听器，并且这个问题发生在他们中的任何一个做任何事情
-
问题内容： 我正在尝试向元素内的display:flex元素添加填充。如果将填充定义为百分比，则在Firefox中不会显示填充，尽管在中定义时会显示px。两种情况在Chrome中都可以正常工作。 问题答案： 网格/弹性百分比 该小组试图研究如何定义垂直百分比边距和填充。注意：传统上，CSS的顶部和底部页边距是针对包含块的宽度而不是其高度进行解析的，这具有一些有用的效果，但通常令人惊讶。现有的布局模
-
问题内容： 我想要一个具有特定高度的垂直菜单。 每个孩子都必须填充父母的身高，并且中间对齐文本。 孩子的数量是随机的，因此我必须使用动态值。 Div 包含随机数量的子代（），这些子代始终必须填充父代的高度。为此，我使用了flexbox。 为了使文本中间对齐，我使用了技巧。但是使用表格显示需要使用高度100％。 我的问题是无法在webkit（Chrome）中使用。 有解决此问题的方法吗？ 还是有一种
-
问题内容： 当与CSS属性结合使用时，Firefox缺少元素底部的填充。（但可在Chrome和Safari中使用。） 我错过了一些东西吗，或者有什么办法可以解决这个问题？ 注意：该演示没有使用任何库进行规范化，但是我也尝试过，但是没有成功。 问题答案： 修改后的CSS
-
我最近刚刚开始使用Swing为程序创建GUI，到目前为止，使用它非常有趣。但是，我对布局设置为gridLayout的JPanel有一个问题。现在它看起来像这样： 右边的网格是一个设置为GridLayout的JPanel，每个单元格都是一个带边框的JLabel。左边的选项也在JPanel中，左边的JPanel和右边的JPanel嵌套在JFrame上设置的GridBagLayout中。 本质上，我的问
-
问题内容： 让我们借用来自Scaryguy的出色示例，并进行如下修改： 项目组架构： 项目架构： 用户架构： 然后，我可以进行以下填充： 请注意，参考字段不是对象ID。 在此示例中，项目模式具有对项目组和订户的引用字段，这使得上述填充成为可能。 如果我想获得一个ProjectGroup对象，该对象包含该组下的所有项目，并且每个项目都包含其订阅者，该怎么办？ 我会说我正在寻找“反向”人群，即基于子架