离子 - 多个元素填充父 <div> 的 100% 高度

Question

我正在构建一个应用程序Ionic，我试图在其中找到四个row元素和button一个div. 该div有一个height: 100%覆盖整个屏幕，并且内容已延伸到其全高。

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

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

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

这是完整的代码。你知道有什么可能的方法来解决它吗？

提前感谢您的回复！

Answer 1

您可以使用calc函数和视口单元的组合来实现此布局。

height: 100vh 将使元素的高度等于视口的高度。

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

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

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

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

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

.button {
  height: 20%;
}

更新的现场演示

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

另一种方法是，得到两个.scroll和.boxes-container的100％的高度和.row的20％的高度：

.scroll {
  height: 100%;
}

.boxes-container {
  height: 100%;
}

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

更新的现场演示