Как установить высоту HTML-элемента на 100%

Часто задаваемый вопрос в дизайне веб-сайта «как вы устанавливаете высоту элемента на 100%»?

Это может показаться легким ответом. Вы просто используете CSS, чтобы установить высоту элемента на 100%, но это не всегда растягивает этот элемент, чтобы он соответствовал всему окну браузера. Давайте выясним, почему это происходит и что вы можете сделать для достижения этого визуального стиля.

Пиксели и проценты

Когда вы определяете высоту элемента, используя свойство CSS, и значение, использующее пиксели, этот элемент занимает настолько большое вертикальное пространство в браузере. Например, абзац с

высота: 100 пикселей;

займет около 100 пикселей вертикального пространства в вашем дизайне. Неважно, насколько велико ваше окно браузера, этот элемент будет иметь высоту 100 пикселей.

Проценты работают иначе, чем пиксели. Согласно спецификации W3C, процентные высоты вычисляются относительно высоты контейнера. Поэтому, если вы помещаете абзац с

высота: 50%;
внутри div с высотой 100px абзац будет иметь 50 пикселей в высоту, что составляет 50% от его родительского элемента.

Почему откаты в процентах высот

Если вы создаете веб-страницу, и у вас есть столбец, который вы хотите занять всю высоту окна, естественным наклоном является добавление

высота: 100%;
к этому элементу. В конце концов, если вы установите

ширина
в

ширина: 100%;
элемент будет занимать полное горизонтальное пространство страницы, поэтому

рост
должны работать одинаково, не так ли? К сожалению, это совсем не так.

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

ширина
Если вы не устанавливаете какие-либо значения в ваших документах, браузер автоматически будет передавать содержимое, чтобы заполнить всю ширину окна (по умолчанию используется 100% ширина).

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

рост
В противном случае браузер просто позволяет потоку содержимого в пределах ширины окна просмотра, пока он не дойдет до конца. Высота вообще не вычисляется.

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

высота: авто;
Фактически вы запрашиваете у браузера вычисление высоты из неопределенного значения. Так как это будет равным нулевому значению, результатом будет то, что браузер ничего не делает.

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

Содержание здесь
Вы, вероятно, хотите, чтобы

ДИВ
и абзац в нем должен иметь высоту 100%, но на самом деле div два родительские элементы:

а также. Чтобы определить высоту

ДИВ
к относительной высоте, вы должны установить высоту

тело
а также

HTML
элементов. Таким образом, вам нужно будет использовать CSS, чтобы установить высоту не только div, но также тела и HTML-элементов. Это может быть проблемой, так как вы можете быстро получить подавленное все, что устанавливается на 100% высоты, только для достижения этого желаемого эффекта.

Некоторые примечания при работе со 100% высотами

Теперь, когда вы знаете, как установить высоту ваших элементов страницы на 100%, может быть интересно выйти и сделать это на всех ваших страницах, но есть несколько вещей, о которых вы должны знать:

Поля и отступы могут добавить полосу прокрутки, где вы не хотите.Одна из самых неприятных вещей, которые я обнаружил при работе с процентными высотами (и шириной), заключается в том, что тогда заполнение и поля на тех же элементах могут добавлять полосы прокрутки на страницу, даже если все содержимое отображается без полосы прокрутки. Это связано с тем, что высота или ширина элемента - это первое, что рассчитывается. Затем добавляются поля и paddings. Поэтому, если у вас есть элемент с высотой 100% и верхним и нижним полями по 10 пикселей каждый, будет полоса прокрутки для дополнительных 20 пикселей. Помните, что модель окна CSS добавляет маркер, границу и дополнение к размеру элемента, поэтому 100% с любым из этих других значений модели коробки фактически будет более 100%.

Если ваш контент занимает больше определенной высоты, он перезапишет что-нибудь после него.Другими словами, если у вас есть дизайн с колонкой высотой 80%, а содержимое, находящееся внутри нее, займет 100% от высоты, дополнительные 20% будут продолжать под столбцом и нарушать визуальный дизайн вашей страницы. Если контент ниже этого столбца, текст будет просто записываться поверх него. Я часто вижу, что это происходит, когда веб-дизайнер пытается создать высоту страницы и заставляет ее работать отлично для запуска, но когда контент на этой странице меняется в будущем, их абсолютная высота полностью нарушает поток страницы. Это вдвойне верно, когда вы строите отзывчивые веб-сайты, ширина и высота которых должны изменяться с размером окна просмотра.

Чтобы исправить это, вы также можете установить высоту элемента. Если вы установите

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

Использование единиц просмотра

Другой способ решения этой задачи - экспериментировать с узлами просмотра CSS. Используя блок измерения высоты видового экрана, вы можете изменять размер элементов, которые занимают определенную высоту области просмотра, и это изменится по мере изменения видового экрана! Это отличный способ получить 100% визуальные изображения на странице, но при этом они могут быть гибкими для разных устройств и размеров экрана.