Question

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

我尝试了以下解决方案，但显然它无法正常工作：

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

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

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

提前感谢您的回复！

Answer 1

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

height: 100vh将为元素提供一个等于视口高度的元素。

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

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

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

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

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

.button {
  height: 20%;
}

Updated live demo

calc()适用于所有主流浏览器和IE＆gt; 8（caniuse.com）

另一种方法是让.scroll和.boxes-container的高度均为100％，.row的高度为20％：

.scroll {
  height: 100%;
}

.boxes-container {
  height: 100%;
}

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

Updated live demo

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

1 个答案: