html - Ionic - 多个元素填充父 的 100% 高度

Question

我正在 Ionic 中构建一个应用程序，我试图在 div< 中找到四个 row 元素和一个 button/。 div 有一个覆盖整个屏幕的 height: 100%，内容必须拉伸(stretch)到它的全高。

我尝试了以下解决方案，但显然它不起作用:

ion-content {
    position: relative; 
    height: auto;
    width: 100%;
}

.boxes-container {
    position: absolute; 
    height: 100%;
    width: 100%;
}

This是完整的代码。您知道解决它的可能方法是什么吗？

预先感谢您的回复!

Answer 1

您可以结合使用 calc 函数和视口(viewport)单位来实现此布局。

height: 100vh 将赋予元素一个等于视口(viewport)高度的高度。

您有一个高度为 44 像素的标题元素。每行都有一个垂直边距。您可以使用 calc 函数从 100vh 中扣除这些:

.boxes-container {
  height: calc(100vh - 44px - 50px);
}

这将使您的元素的高度等于视口(viewport)的高度减去标题元素的高度。

然后您需要为您的四行和按钮指定 20% 的高度，以便它们占据容器中所有可用的垂直空间。

.row {
  ...
  height: 20%;
}

.button {
  height: 20%;
}

Updated live demo

calc() 可用于所有主流浏览器和 IE>8 ( caniuse.com )

---

另一种方法是为 .scroll 和 .boxes-container 设置 100% 的高度，为 .row 设置 20 的高度%:

.scroll {
  height: 100%;
}

.boxes-container {
  height: 100%;
}

.row {
  ...
  height: 20%;
}

Updated live demo