CSS：我如何製作1：1的div，它是父母的寬度或高度的100％，以較小者爲準？

Question

此筆可能解釋了我的問題，最好的：

http://codepen.io/anon/pen/xwQpLy?editors=110

我使用下面的技巧，以保持約束到1盒：1的比例：

.squarebox { 
    position: relative; 
    width: 100%; 
} 
.squarebox::before { 
    padding-bottom: 100%; 
    content: ""; 
    display: block; 
} 
.content { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

但是，我d喜歡盒子始終填寫父母的寬度或高度，以較小者爲準。在上面的例子中，該盒子只填充了父母的寬度。

Answer 1

你的意思是這樣？： http://codepen.io/anon/pen/yYQpqp?editors=110

母公司必須是位置：相對的，。內容DIV必須寬度：100％;高度：100％;以及位置：與頂部，右側，底部和左側的相對設置爲0.

我剝去了方框div。

.squarebox { 
    position: relative; 
    width: 100%; 
} 

.content { 
    width:100%; 
    height:100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background:orange; 
}