高度100%的内容

Question

我有两个cols的视图,我希望第一个col有80%的窗口高度,第二个col有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但我不能这样做,因为高度会根据每个设备而改变.

创建没有滚动的屏幕,内容适合屏幕高度是一种常见的方法,我认为离子应该有一个记录在案的解决方案.

Answer 1

您可以使用视口单元:

<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垂直堆叠,它们之间没有空格等.