css - 高度为 100% 的内容

Question

我有一个包含两个列的 View ，我希望第一个列占窗口高度的 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 是视口(viewport)高度的 80%。 20vh 也是如此。我的回答还假设您已经正确设置了一些其他 CSS“修复”以使两个 div 垂直堆叠且它们之间没有空格等。