防止重疊內容的動態寬度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。