Почему не стоит задавать фиксированную высоту для родительского элемента?

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

Смотрите видео:

https://vk.com/video-219751701_456239223

VK Видео | YouTube

Что происходит, когда вы задаете фиксированную высоту блока?

В макетах в Figma размеры блока задаются фиксированно в пикселях.


В Figma высота блока задана в пикселях

Если вы просто перенесете значение высоты блока из Figma в Taptop, то могут возникнуть следующие ситуации:

  • При добавлении контента он перестанет вмещаться в родительский блок.
  • На десктопе все может выглядеть нормально, а на мобильном устройстве контент станет больше по высоте и не поместится в секцию.


Переносим значение высоты в пикселях из Figma в Taptop

У блока фиксированная высота и контент в него не помещается

В чем разница дизайна в Figma и реальной верстки?

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

В Figma контент блока обрезается при уменьшении ширины холста

В реальной верстке, построенной на правилах HTML и CSS, работают совсем другие законы:

  • Каждый элемент влияет на соседний.
  • При изменении ширины экрана блоки выглядят по-другому — меняется их ширина и высота.
  • Контент должен адаптироваться к разной ширине экрана, а не обрезаться.

Контент страницы адаптируется к ширине экрана

Как решить проблему переполнения блока контентом?

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

Выберите секцию и задайте значение высоты auto

Высота секции — auto

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

Резюме

  • В Figma — фиксированные размеры блоков в пикселях.
  • При верстке — для больших блоков вместо фиксированной высоты → задайте значение auto.