Некоторые вещи, которые вы должны знать при работе с единицами измерения

Некоторые вещи, которые вы должны знать при работе с единицами измерения

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