高度等於動態寬度（CSS流體佈局）+展開以包含溢出

Question

嗨 - 是否有可能有一個高度等於流體寬度的div展開以在窄視口內包含其內容？

我想出了一個變通用純色的div：http://jsfiddle.net/2nprw0xq/

但不能與邊框：http://jsfiddle.net/534k9e2n/

下面是我使用的代碼。謝謝，B。

<div class="holder"> 
<div class="shape"></div> 
<div class="shape_outer"> 
<div class="shape_inner"> Text... </div> 
</div> 
</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; 
    border: 1px solid #111; 
} 
.shape_inner { 
    padding: 20px; 
} 

Answer 1

移動邊框的內部元件，然後添加寬度爲100％和100％的最小高度，這樣的：

.shape_inner { 
    border: 1px solid #111; 
    padding: 20px; 
    min-height: 100%; 
    width: 100%; 
} 

檢查出來：http://jsfiddle.net/534k9e2n/1/