如何定位：绝对div跟随位置的填充：相对父;

Question

启用box-sizing:border-box;后，如何制作宽度和高度均为100％的position:absolute; div，并使用填充符调整父div的大小？

编辑 - http://jsfiddle.net/cLzhffa7/

#first是否有可能像#second一样有位置：绝对;

Answer 1

<强> Demo

来自您的描述

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
    position:relative;
    height:200px;
    padding:10px;
    border:2px solid;
}
.child{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    border:2px solid red;
    box-sizing:border-box;
}

---

如果您不想使用保证金

<强> DEMO

CSS

.parent{
    position:relative;
    height:200px;
    padding:10px;
    border:2px solid;
    width:200px;
}
.child{
    position:absolute;
    border:2px solid red;
    box-sizing:border-box;
    height:inherit;
    width:inherit;
}

Answer 2

将孩子的边距设置为与父级的边距相同，然后将left，right，top和bottom设置为0而不是定义宽度和高度：

.child {
  position: absolute;
  background:#000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin:20px;
}

FIDDLE

Answer 3

如果你只是删除这个css代码，你可以使它们相同

#first {
position:absolute;
top:0;
left:0;
}