html - CSS のビューポート サイズに対する 3 x 3 グリッド

Question

高さと幅の値をそれぞれ 30% として 3 x 3 グリッドを作成しようとしています (vh、vw、および vm 単位は避けたい):

section {
display:inline-block;
padding: 0.5% 0.5%;
margin: 0.5% 0.5%;
box-sizing:border-box;
width: 30%;
height: 30%;
border: #000 solid 1px; 
}

ただし、幅は常に 30% ですが、高さはこの値に固定されるため、最初のセクションのテキストが 2 番目のセクションよりも多い場合、最終的にははるかに高くなります。

ここを参照してください: http://jsfiddle.net/GzCPw/

Answer 1

ブラウザーがパーセンテージ値で高さを受け入れないことは確かです。JavaScript を使用して、高さの絶対値を動的に更新します。

ここを参照してください: css に垂直方向のパーセンテージを使用する - 高さ: x%;