高度为 100% 的内容

Question

我有两个列的视图，我想要第一个列具有窗口高度的 80%，第二个列具有 20%。

我试过了：

<ion-view title="Events" >
    <ion-content >
        <div style="height: 80%;">
            Image here!
        </div>
        <div style="height: 20%;">
            Text here!
        </div>
    </ion-content>
</ion-view>

不工作，因为这只有在我有一个高度为px 的容器时才有效，但我不能这样做，因为高度会根据每个设备而变化。

创建没有滚动且内容适合屏幕高度的屏幕是一种常见的方法，我认为 ionic 应该为此提供文档化解决方案。

Answer 1

你可以使用viewport units:

<ion-view title="Events" >
    <ion-content >
        <div style="height: 80vh;">
            Image here!
        </div>
        <div style="height: 20vh;">
            Text here!
        </div>
    </ion-content>
</ion-view>

80vh 是视口高度的 80%。 20vh 也是如此。我的回答还假设您已经正确设置了一些其他 CSS“修复”，以使两个 div 垂直堆叠，它们之间没有空格等。