Как использовать CSS, чтобы установить высоту элемента HTML на 100%

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

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

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

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

 высота: 100px; 

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

Проценты работают не так, как пиксели. В соответствии со спецификацией W3C, процентные высоты рассчитываются относительно высоты контейнера. Так что если вы поставите абзац с

 высота: 50%; 

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

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

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

 высота: 100%; 

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

 ширина 

в

 ширина: 100%; 

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

 высота 

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

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

 ширина 

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

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

 высота 

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

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

 высота: авто; 

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

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

 Содержание здесь 

Вы, вероятно, хотите

 div 

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

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

 div 

на относительную высоту, вы должны установить высоту

 body 

а также

 html 

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

Несколько вещей, на которые стоит обратить внимание при работе на 100% высоты

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

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

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

 auto, 

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

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

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

Оцените статью
Solutics.ru
Добавить комментарий