Отрегулируйте высоту веб-страницы до высоты экрана мобильного телефона

Question

У меня есть мобильное приложение. Я хочу, чтобы мой css работал со всеми мобильными телефонами. Чтобы сделать это, я просто использовать проценты для всех моих CSS звонки:

.Wrapper 
{ 
    margin: auto; 
    text-align: center; 
    width: 60%; 
} 

Проблема заключается в том, что я не могу получить высоту веб-страницы, чтобы соответствовать всем страницам. Под этим я подразумеваю, что Android-экраны, например, огромны (с большим количеством свободного места внизу), но на других телефонах нет. (Представьте, что изображение ниже - андроид. Вот как мое приложение будет выглядеть на нем)

Я попытался это, чтобы получить высот на все быть одинаковыми:

body 
{ 
    text-align: center; 
    font-family: Helvetica, Arial, sans-serif; 
    color: Black; 
    background: #39bcd4 none; 
    height: 100%; 
    width: 100%; 
} 

The width работает, но высота не делает. Как я могу заставить высоту работать одинаково? Если высота выключен, то все мои проценты будут от слишком (пытаясь настроить для каждого мобильного браузера)

Answer 1

От Sitepoint's CSS Reference:

Процентные значения относятся к высоте содержащего блока элемента. Если высота содержащего блока не указана явно (то есть, это зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, процентное значение считается автоматическим. Процентное значение также рассматривается как auto для ячеек таблицы, строк таблицы и групп строк.

Установка ваше тело position:absolute; должно работать, если он не будет пытаться добавлять top:0; и bottom:0; вместе с absolute позиционирования.

Answer 2

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

Answer 3

Если вы хотите, ширину и высоту вашего сайта, чтобы быть 100% ширины и высоты вашего WebView, то вы должны установить окна просмотра мета-тег:

<meta name="viewport" content="width=device-width,height=device-height initial-scale=1"> 

большое описание этого, наряду с количество других советов для гибридных приложений, можно найти на the Chrome developer site.

Answer 4

Используйте блок высоты окна просмотра в CSS так:

.element { max-height: 100vh; } 

или

.element { min-height: 100vh; } 

или даже

.element { min-height: calc(100vh - 60px); } 

, если вам нужно настроить высоту элемента, который не является полной высотой.