содержание с высотой 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, но я не могу этого сделать, потому что высота будет меняться в зависимости от каждого устройство.

Создание экранов без прокрутки с содержанием, соответствующим высоте экрана, является общим подходом, и я думаю, что ионный должен иметь документальное решение для этого.

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 вертикально без пробелов между ними и т. Д.