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

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

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

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

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

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

При добавлении контента он перестанет вмещаться в родительский блок.

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

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

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

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

Каждый элемент влияет на соседний.

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

Контент должен адаптироваться к разной ширине экрана, а не обрезаться.

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

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

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

Резюме

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

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