Как задать ширину блока в процентах правильно?
Хочу резиновый блок на пол-экрана. Ставлю width: 50%, но иногда он вылезает за пределы или меряется не от того, чего я ждал. Относительно чего считаются проценты ширины и как не сломать раскладку?
2 ответа
Проценты ширины считаются относительно ширины родителя (точнее, его content-области). width: 50% = половина от того, сколько места даёт контейнер.
.parent { width: 600px; }
.child { width: 50%; } /* = 300px */
Если поменять родителя на 400px — ребёнок станет 200px. Это и есть суть резиновой вёрстки.
Главная причина «вылезания за пределы» — padding и border, которые при content-box прибавляются к этим 50%. Лечится глобально:
*, *::before, *::after { box-sizing: border-box; }
С border-box width: 50% остаётся 50% даже с внутренними отступами.
Полезные приёмы:
- чтобы блок не становился слишком широким на больших экранах, ограничьте его:
max-width: 600px; width: 100%; - проценты от высоты (
height: 50%) работают, только если у родителя задана высота — иначе считать не от чего, и значение игнорируется; - для отступов между процентными колонками используйте
gapво flex/grid, а не margin, чтобы не пересчитывать проценты вручную.
Если делаете две колонки по 50% флоатами или inline-block и они не помещаются в ряд — почти всегда виноват либо box-sizing, либо margin между ними, который прибавляется к 100%. Самый простой выход — не считать проценты руками, а отдать раскладку флексу: display: flex + flex: 1 на детях сами поделят ширину поровну с учётом gap.