当子级具有位置时如何使子级div具有父级div的宽度：绝对和一些填充答案

【问题标题】：How to make a child div the width of the parent div when the child has position:absolute and some padding当子级具有位置时如何使子级div具有父级div的宽度：绝对和一些填充
【发布时间】：2010-12-21 22:10:02
【问题描述】：

当子 div 具有 position:absolute 和一些填充时，如何使子 div 具有父 div 的宽度？

这是一个例子。我希望孩子不要超过父母。

http://jsfiddle.net/usv9R/

【问题讨论】：

标签： html css

【解决方案1】：

http://jsfiddle.net/usv9R/1/

如果您手动设置顶部/左侧/右侧/底部，而不明确设置宽度，它将扩展到父级。我已将其设置为 12px 以提供填充效果

注意父项上的position:relative;，否则子项对父项的父项是绝对的，以此类推。

这有一个不幸的后果。一，您可能已经知道，父级不会扩展以适应子级。

另外，我突然想到你可能想要孩子身上的填充物？您可以做到这一点，但请注意，鉴于上述限制，父级不一定会使用过多的垂直填充来包含子级。

【讨论】：

【解决方案2】：

将position:relative 添加到父级，以便子级将其用于相对大小而不是页面。然后将left:0px;right:0px; 添加到孩子，并删除宽度以便它自己计算。

像这样：http://jsfiddle.net/usv9R/10/

【讨论】：