divの高さ=パーセンテージで表した幅（コンテナ要素の正方形ではありません）

Question

要素の幅と高さをパーセンテージで設定して、大きな画面では少し大きく、通常の画面では普通です。私はmin-heightとmin-widthも設定して、小さすぎる画面で見るとレイアウトが歪まないようにしました。私は自分の要素の1つを四角形で表示したいと思っていますが、私はそれが起こるためのCSSだけの解決策を考え出すことができません。

これは私が試したものです：http://jsfiddle.net/5VTTD/しかし、それは動作しませんでした。

これは動作しますが、http://jsfiddle.net/5VTTD/1/ですが、JSを使用します。

Answer 1

あなたは、コンテナや四角などの内部一つとして外部<div>が必要になります。

私はスクエアに50％の寸法を使用しましたが、希望するサイズを使用することができます。それは親の<div>コンテナに相対的です。

また、黒い背景色を付けて強調表示しました。ここにはDEMOがあります。

このトリックはすべて、親のpadding-bottom: 100%にあります。<div>です。

CSS：

#container { 
    position: relative; 
    width: 100%; 
    padding-bottom: 100%; 
} 

#square { 
    position: absolute; 
    width: 50%; 
    height: 50%; 
    background-color: #000000; 
} 

HTML：あなたは、コンテナまたは箱の内側から、それはコンテナではないコンテナ自体の内容からの高さだ派生への明示的な高さを設定する必要が

<div id="container"> 
    <div id="square"> 
    </div> 
</div> 

Answer 2

は、このを見てみましょう：http://jsfiddle.net/5VTTD/9/