От автора: Дэвид Чейнин написал обобщенную статью с кратким изложением проблемы, связанной с установкой значения height элемента в 100vh в мобильных браузерах и последующим размещением чего-то внизу.
Посмотрите на изображение ниже:
Проблема в том, что Chrome не учитывает адресную строку, когда определяет, как сжимать элемент, что приводит к тому, что нижняя часть элемента оказывается фактически вне нижнего края окна просмотра.
<div class="full-page-element"> <button>Button</button> </div>
.full-page-element { height: 100vh; position: relative;
} .full-page-element button { position: absolute; bottom: 10px; left: 10px;
}
Можно ожидать, что эта кнопка на изображении будет видимой (при условии, что этот элемент находится в верхней части страницы, и вы не прокручивали ее), поскольку она расположена вдоль нижнего края элемента 100vh. Но она на самом деле скрыта в мобильных браузерах, включая iOS Safari или Android Chrome.
Я использую часто это:
body { height: 100vh; /* Nice to not have to think about the HTML element parent */ margin: 0;
}
Это просто быстрый способ обеспечить, чтобы body растягивался на всю высоту, без каких-либо других элементов. Я обычно делаю это в простых демонстрациях, но мне говорят, что даже это немного проблематично, потому что вы можете испытывать нервозность, когда адресная строка появляется и исчезает, или вещи могут быть центрированными не так, как вы ожидали.
Вы могли бы подумать, что проблему решит body { height: 100% }, но и здесь есть подводные камни. body — это потомок html, который имеет такую же высоту, что и его содержимое, как и любой другой элемент.
Если вам нужно, чтобы body занимал всю высоту, вам также нужно иметь дело с элементом HTML:
html, body { height: 100%;
}
… что не так уж сложно.
Сложно расположить вещи вдоль нижнего края. Это проблематично из-за контейнера position: absolute; внутри «полной высоты» (который часто выше окна просмотра).
Если вы попытаетесь разместить что-то вроде фиксированной панели навигации в нижней части экрана, вы, вероятно, сделаете это с, помощью position: fixed; bottom: 0; и это, кажется, работает нормально. Адресная строка сместит это вниз, как и следовало ожидать.
Горизонтальные единицы на основе окна просмотра такие же странные и проблемные из-за другого элемента пользовательского интерфейса браузера: полосы прокрутки. Если в окне браузера есть видимая полоса прокрутки, эта полоса прокрутки обычно входит в визуальное пространство, хотя значение 100vw вычисляется так, как если бы полосы прокрутки там не было. Другими словами, 100vw приведет к появлению горизонтальной полосы прокрутки, чего вы, вероятно, не ожидаете.
В нашем последнем обзоре списков пожеланий CSS улучшение обработки единиц измерения на основе окна просмотра упоминалось несколько раз, поэтому разработчики явно заинтересованы в том, чтобы иметь более эффективные решения для этих вещей. Я не уверен, что это будет означать для веб-совместимости, потому что изменение способа их работы может нарушить все обходные пути, которые мы использовали ранее, и которые, безусловно, все еще работают в наших проектах.
Автор: Chris Coyier
Источник: https://css-tricks.com
Редакция: Команда webformyself.
