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

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%;