如何获得三个同样高的行？

Question

我想要一个由三个同样高的行组成的离子页面/模板 - 指出它们必须随屏幕尺寸缩放。

使用here的列很容易，但我找不到行的类似工具？

Answer 1

如果你想拥有基于视口完美大小的3行，只需使用纯CSS中的vh单位。

＆＃13;

＆＃13;

* {
  margin:0;
  padding:0;
}
div {
  background:red;
  height:33.33vh;
}
div:nth-child(odd) {
  background:green;
}

＆＃13;

<div>1</div>
<div>2</div>
<div>3</div>

＆＃13;

＆＃13;

＆＃13;

1vh始终等于当前视口高度的1％，supported by all browsers。

Answer 2

您是否尝试过使用视口高度？

div {height: 33.3vh;}

<div style="background: grey"></div>
<div style="background: orange"></div>
<div style="background: yellow"></div>

Answer 3

通常，您无法为行找到此类功能。 如上所述，添加高度：

div {height：33.3vh;}

虽然如果你想让它对所有屏幕尺寸/设备保持响应，那么我建议使用

div {min-height：33.3vh;溢出：隐藏; }

那么如果这个区域的任何东西太大，那么它就不会超出div了。