Почему не стоит задавать фиксированную высоту для родительского элемента?
При верстке сайта бывает такое, что контент выезжает за пределы высоты контейнера. Обычно проблема в том, что вы задали фиксированную высоту блока. Разберемся, почему так делать не надо.
Смотрите видео:
https://vk.com/video-219751701_456239223
Что происходит, когда вы задаете фиксированную высоту блока?
В макетах в Figma размеры блока задаются фиксированно в пикселях.
Если вы просто перенесете значение высоты блока из Figma в Taptop, то могут возникнуть следующие ситуации:
- При добавлении контента он перестанет вмещаться в родительский блок.
- На десктопе все может выглядеть нормально, а на мобильном устройстве контент станет больше по высоте и не поместится в секцию.
В чем разница дизайна в Figma и реальной верстки?
В Figma мы постоянно видим фиксированные значения высоты и ширины элементов. Но представьте, что будет, если изменить ширину холста в проекте Figma — если дизайн не построен на автолейаутах, то контент будет обрезаться.
В реальной верстке, построенной на правилах HTML и CSS, работают совсем другие законы:
- Каждый элемент влияет на соседний.
- При изменении ширины экрана блоки выглядят по-другому — меняется их ширина и высота.
- Контент должен адаптироваться к разной ширине экрана, а не обрезаться.
Как решить проблему переполнения блока контентом?
Решение простое — уберите фиксированную высоту с родительских блоков — секций, контейнеров и других больших блоков. Вместо значения в пикселях выберите auto.
После этого секция будет автоматически подстраиваться под объем контента, сколько бы вы его ни добавили. Таким образом, блоки будут устойчивы к добавлению контента и изменениям ширины экрана, а ваша верстка — надежной и адаптивной.
Резюме
- В Figma — фиксированные размеры блоков в пикселях.
- При верстке — для больших блоков вместо фиксированной высоты → задайте значение auto.