相对于CSS中视口大小的3 x 3网格

Question

我正在尝试创建一个3 x 3网格，每个网格的高度和宽度值均为30％（我希望避免使用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％，但高度确实固定在此值，因此当第一部分的文本比第二部分多时，它会更高一些。

见这里：http://jsfiddle.net/GzCPw/

Answer 1

我很确定浏览器不接受百分比值的高度。使用javascript动态更新绝对高度值。

见这里：use vertical percentage for css - height: x%;