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

Question

我正在使用Ionic构建一个应用程序，我试图定位四个在

中的row元素和一个button。

具有height: 100%属性，覆盖整个屏幕，内容必须延伸到其完整高度。

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

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

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

这里是完整的代码。你有想过可能的解决办法吗？ 提前感谢您的回复！

- d_z90

---

像这样吗？http://play.ionic.io/app/516728847afe - Turnip

好的！将其作为答案编写并解释您做了什么来获得这些分数。谢谢，伙计！ - d_z90

Answer 1

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

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

您有一个高度为44px的标题元素。每行都有垂直边距。您可以使用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%;
}

Updated live demo

- Turnip

---

实际上，如果屏幕改变其尺寸，该部分不会延伸到 div 的末端。你知道怎么解决这个问题吗？ - d_z90

我刚注意到按钮不在行内。每一行也有一个需要考虑的边距。你是否真的想要这样的东西？http://play.ionic.io/app/516728847afe - Turnip

不完全是。按钮应该有不同的尺寸，但是答案满足了问题 :) 我将对其进行编辑。 - d_z90