Процентные значения в CSS могут быть хитрыми. Когда вы устанавливаете свойство CSS высоты элемента на 100%, что именно вы устанавливаете на 100%? Это главный вопрос, с которым вы сталкиваетесь при работе с процентами в CSS, и по мере того, как макеты становятся все более сложными, становится намного сложнее отслеживать проценты, что приводит к некоторому совершенно странному поведению, если вы не будете осторожны.
Работа с процентами имеет явное преимущество; Процентные макеты автоматически адаптируются к разным размерам экрана. Вот почему использование процентов важно для адаптивного дизайна. Популярные сеточные системы и CSS-структуры используют процентные значения для создания своих адаптивных сеток.
Ясно, что есть определенные ситуации, лучше подходящие для статических значений, и другие, которые гораздо лучше работают с чем-то адаптивным, например, с процентами. Вам нужно решить, какой маршрут выбрать с элементами вашего дизайна.
Статические Единицы
Пиксели статичны. Десять пикселей на одном устройстве — это десять пикселей на каждом устройстве. Конечно, есть такие вещи, как плотность, и они способ, которым устройство фактически интерпретирует, что такое пиксель, но вы никогда не увидите серьезных изменений, потому что экран другого размера.
С помощью CSS вы можете легко определить высоту элемента в пикселях, и она останется прежней. Это предсказуемо.
div {
высота: 20 пикселей;
}
Это не изменится, если вы не измените его с помощью JavaScript или чего-то подобного.
Теперь есть другая сторона этой монеты. Это не изменится. Это означает, что вам нужно точно измерить все, и даже тогда ваш сайт не будет работать на всех устройствах. Вот почему статические блоки имеют тенденцию работать лучше для дочерних элементов, медиа и вещей, которые начнут искажаться и выглядеть странно, если они растягиваются и растут.
Установка высоты элемента на 100%
Когда вы устанавливаете высоту элемента на 100%, она распространяется на всю высоту экрана? Иногда. CSS всегда обрабатывает процентные значения как процент от родительского элемента.
Без родительского элемента
Если вы создали свежий
это только содержится в теге тела вашего сайта, 100%, вероятно, будет соответствовать высоте экрана. Это если вы не определили значение высоты для .
HTML:
CSS:
div {
высота: 100%;
}
Это
Высота элемента будет равна высоте экрана. По умолчанию охватывает весь экран, так что это основа, которую ваш браузер использует при расчете высоты элемента.
С родительским элементом со статической высотой
Когда ваш элемент вложен в другой элемент, браузер будет использовать высоту родительского элемента, чтобы вычислить значение для 100%. Итак, если ваш элемент находится внутри другого элемента с высотой 100 пикселей, и вы устанавливаете высоту дочернего элемента на 100%. Дочерний элемент будет иметь высоту 100px.
HTML:
CSS:
#parent {
высота: 100 пикселей;
}
#child {
высота: 100%;
}
Высота, доступная для дочернего элемента, ограничена высотой родительского элемента.
С родительским элементом с процентной высотой
Это может показаться нелогичным, но вы можете установить высоту элемента в процентах от процента. Если у элемента есть родительский элемент, высота которого также определена как процентное значение, браузер будет использовать то же значение, что и родительский элемент, который он уже рассчитал на основе своего родительского элемента. Это потому, что 100% значения все еще это значение.
CSS:
#parent {
высота: 75%;
}
#child {
высота: 100%;
}
В этом случае высота родительского элемента составляет 75% от всего экрана. Таким образом, ребенок также составляет 100% от общего роста.
С родительским элементом без высоты
Интересно, что когда родительский элемент не имеет определенной высоты, браузер будет продолжать повышаться уровень за уровнем, пока не найдет конкретное значение, с которым он может работать. Если он проделает весь путь до ничего не найдя, браузер по умолчанию установит высоту экрана, предоставив вашему элементу эквивалентную высоту.
HTML:
CSS:
#parent {}
#child {
высота: 100%;
}
Дочерний элемент простирается вплоть до верха и низа экрана.
Единицы просмотра
Поскольку вычисления с процентными единицами могут быть сложными, и каждый элемент привязан к своему родительскому элементу, существует набор единиц, которые игнорируют все эти и базовые размеры элементов непосредственно за пределами доступного пространства экрана. Это единицы просмотра, и они дают вам прямой размер в зависимости от высоты или ширины экрана, независимо от того, где находится элемент.
Чтобы установить элемент высота равной высоте экрана, установите его значение высоты 100vh.
div {
высота: 100vh;
}
Делая это, легко разбить макет, и вам нужно знать, какие другие элементы будут затронуты, но область просмотра, безусловно, является самым прямым способом установить высоту элемента на 100% экрана.
