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

您可以使用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＆＃34;修复＆＃34;使两个div垂直堆叠，它们之间没有空格等等。

高度100％的内容

1 个答案: