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

Дата публикации: 2019-11-29

От автора: Дэвид Чейнин написал обобщенную статью с кратким изложением проблемы, связанной с установкой значения height элемента в 100vh в мобильных браузерах и последующим размещением чего-то внизу.

Посмотрите на изображение ниже:

Проблема в том, что Chrome не учитывает адресную строку, когда определяет, как сжимать элемент, что приводит к тому, что нижняя часть элемента оказывается фактически вне нижнего края окна просмотра.

<div class="full-page-element">
  <button>Button</button>
</div>

<button>Button</button>

</div>

.full-page-element {
  height: 100vh;
  position: relative;
}

.full-page-element button {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.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 {

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

html, body {

height: 100%;

}

… что не так уж сложно.

Сложно расположить вещи вдоль нижнего края. Это проблематично из-за контейнера position: absolute; внутри «полной высоты» (который часто выше окна просмотра).

Если вы попытаетесь разместить что-то вроде фиксированной панели навигации в нижней части экрана, вы, вероятно, сделаете это с, помощью position: fixed; bottom: 0; и это, кажется, работает нормально. Адресная строка сместит это вниз, как и следовало ожидать.

Горизонтальные единицы на основе окна просмотра такие же странные и проблемные из-за другого элемента пользовательского интерфейса браузера: полосы прокрутки. Если в окне браузера есть видимая полоса прокрутки, эта полоса прокрутки обычно входит в визуальное пространство, хотя значение 100vw вычисляется так, как если бы полосы прокрутки там не было. Другими словами, 100vw приведет к появлению горизонтальной полосы прокрутки, чего вы, вероятно, не ожидаете.

В нашем последнем обзоре списков пожеланий CSS улучшение обработки единиц измерения на основе окна просмотра упоминалось несколько раз, поэтому разработчики явно заинтересованы в том, чтобы иметь более эффективные решения для этих вещей. Я не уверен, что это будет означать для веб-совместимости, потому что изменение способа их работы может нарушить все обходные пути, которые мы использовали ранее, и которые, безусловно, все еще работают в наших проектах.

Автор: Chris Coyier

Источник: //css-tricks.com

Редакция: Команда webformyself.

Метки: css