html - 当父级的框大小为边框框时，如何获得具有绝对位置的流体框？

Question

我有两个 div 'parent' 和 'child'。两个盒子都有一个 box-sizing 属性，其值为 border-box。父级具有固定的宽度和填充，而我需要子级的流体宽度和绝对位置。子级应该位于父级 div 内，但它的行为有点奇怪，并占据了父级的全宽，包括将其推到父级之外的填充。我的标记如下所示:

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

和CSS:

.parent{
    width: 500px;
    height: 500px;
    padding: 45px;
    box-sizing: border-box;
    background-color: red;
    position: relative;
}

.child{
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 10px;
    box-sizing: border-box;
    background-color: orange;
}

您还可以在JSFiddle查看它。请建议!

Answer 1

您需要向子元素添加 left: 0 以使其与父元素保持对齐。检查here .