防止动态宽度div与下面的重叠内容相等

Question

任何人都知道如何防止动态宽度div的高度与下面的内容重叠。 div需要扩展以包含窄视口中的内容。

@caeth建议将下面的div移到上面的div中，这有效：http://jsfiddle.net/534k9e2n/5/但是我正在寻找一个不需要这个的解决方案。

以下是代码：

<div class="holder">
<div class="shape"></div>
<div class="shape_outer">
<div class="shape_inner">Content...</div>
</div>
</div>

<div class="shape_below"></div>

...

.holder {
display: inline-block;
position: relative;
width: 50%;
}
.shape {
margin-top: 100%;
}
.shape_outer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.shape_inner {
background: #ddd;
min-height: 100%;
width: 100%;
}
.shape_below {
background: #111;
width: 200px;
height: 200px;
}

和JSFiddle：http://jsfiddle.net/534k9e2n/4/

谢谢B。

Answer 1

试试这个：

.shape {
  margin:20px;
}

您正在做的是在div周围创建隐藏字段。我认为您可以删除shape-outer。