Question

我有一个带有填充的父div元素，并使用边框样式定义。我试图在父元素中嵌套多个重叠的子div，并让子div填充父容器，但只填充父容器的盒子模型的内容部分。

我遇到的问题是，孩子div的顶部和左侧绝对定位是由浏览器正确计算的，但是高度和宽度仍然与父div的总高度和宽度相同，而不仅仅是内容部分的高度和宽度。

这是我尝试过的CSS，但它不起作用：

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    width: 300px;
    height: 60px;
    padding: 25px 12px 12px;
    border: thin solid red;
    position: absolute;
}
.layer {
    width: 100%;
    height: 100%;
    position: absolute;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

请查看我的jsfiddle，了解我要做的事情：http://jsfiddle.net/dwp1v0uu/

如果您检查＆＃34;容器＆＃34;元素，你会看到它总共是300像素×60像素，但内容部分只有274像素×21像素。每个嵌套的子div都是298像素×58像素，但我希望它们更接近274像素×21像素大小。

Answer 1

你能否指定与填充相同的孩子的位置？

（例如，你绝对不需要浮动）

.layer {
    top: 25px;
    right: 12px;
    bottom: 12px;
    left: 12px;
}

Answer 2

您可以在它们之间创建另一个元素。它会解决你的问题。

HTML：

<div class="container">
  <div class="layer-wrapper">
    <div class="layer">a</div>
    <div class="layer">b</div>
    <div class="layer">c</div>
  </div>
</div>

CSS：

.layer-wrapper {
  position: relative;
  height: 100%;
}

JSFiddle

希望它有所帮助！

将重叠的子div填充到父div内容区域

2 个答案: