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

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%;
}

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

Answer 1

С Ссылка CSS Sitepoint :

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

Если ваше тело не пытается добавить top:0; и *, должно работать значение position:absolute;.1011 * вместе с вашим absolute позиционированием.

Answer 2

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

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

Отличное описание этого, а также ряд других советов для гибридных приложений можно найти на сайте разработчика Chrome .

Answer 3

Используйте единицу высоты области просмотра в CSS следующим образом:

.element { max-height: 100vh; }

или

.element { min-height: 100vh; }

или даже

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

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

Answer 4

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