Исполняемые доки CSS: Width и height

Q: Чем отличается width: 100% от width: auto?

Для блочного элемента auto заполняет контейнер вместе с padding и рамкой. width: 100% делает ширину содержимого равной ширине контейнера, поэтому при box-sizing: content-box по умолчанию любой padding или рамка приводят к выходу элемента за контейнер.

Q: Чем width отличается от max-width?

width задает точный размер. max-width задает верхний предел: элемент может быть уже, например на телефоне, но никогда не шире. width: 100%; max-width: 600px; заполняет маленькие экраны и останавливается на 600px на больших.

Q: Как сделать элемент на всю высоту экрана?

Используйте min-height: 100vh (или 100dvh, чтобы учесть панели мобильного браузера). min-height вместо height позволяет секции вырасти, если содержимое выше экрана.

Как задать ширину и высоту

width и height задают размер области содержимого элемента. По умолчанию padding и рамка добавляются снаружи этого размера.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

Блок размером 260 на 100 пикселей: 240 на 80 содержимого плюс 10px padding с каждой стороны. С box-sizing: border-box он был бы ровно 240 на 80; оба варианта объяснены на странице про блочную модель.

Значения

Значение	Пример	Смысл
`auto`	`width: auto`	По умолчанию. Блоки заполняют ширину контейнера; высота подстраивается под содержимое
Длина	`300px`, `20rem`	Фиксированный размер
Проценты	`50%`	От ширины (для `width`) или высоты (для `height`) содержащего блока
Единицы viewport	`100vh`, `50vw`, `100dvh`	От окна браузера
`min-content`	`width: min-content`	Как можно уже, решает самое длинное слово
`max-content`	`width: max-content`	Ширина содержимого в одну строку
`fit-content`	`width: fit-content`	Как `max-content`, но не шире контейнера

Почему height: 100% ничего не делает

Процентной height нужен родитель с определенной высотой, от которой считается процент. Когда высота родителя auto, а это обычный случай, height: 100% дочернего элемента тоже ведет себя как auto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

Первый дочерний элемент высотой ровно в свой текст. Второй заполняет родителя, потому что у родителя есть высота. Чтобы цепочка процентов работала для всей страницы, высота нужна каждому предку вплоть до html и body, поэтому большинство раскладок используют flexbox или grid: их дочерние элементы растягиваются без всяких процентов.

min-height и max-width: гибкие размеры

Фиксированные размеры легко ломаются: фиксированная высота переполняется, когда текст длиннее ожидаемого, а фиксированная ширина слишком велика для телефона. Свойства min- и max- задают пределы, а не точные размеры.

Свойство	Смысл
`min-width`	Не уже этого
`max-width`	Не шире этого
`min-height`	Не ниже этого, но может расти
`max-height`	Не выше этого (лишнее содержимое переполняет)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

На экране уже 360px, например на телефоне, карточки сжимаются вместе с ним, потому что max-width это только потолок.

Когда действуют и размер, и предел, побеждают пределы: max-width сильнее width, а min-width сильнее max-width.

width: auto и width: 100%

Для блочного элемента оставить width равным auto почти всегда правильно. auto вписывает весь блок, вместе с padding и рамкой, в контейнер. 100% делает содержимое шириной с контейнер и затем добавляет padding и рамку сверху:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100% все равно полезен у элементов, которые по умолчанию не блочные (<input>, <img>, inline-block), желательно вместе с box-sizing: border-box.

Размер по содержимому: fit-content

Чтобы блок был шириной только в свой текст, не превращая его в inline-block, используйте fit-content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content вместе с margin-inline: auto центрирует подпись или блок в виде кнопки, который остается ровно шириной в свой текст.

Секции на всю высоту и единицы viewport

vh это 1% высоты окна просмотра, а vw 1% его ширины. На телефонах адресная строка браузера растет и сжимается при прокрутке, поэтому 100vh может оказаться выше видимой области. Динамическая единица dvh следует за видимой областью, а svh использует наименьшую видимую высоту:

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

Для полноэкранных секций используйте min-height, а не height, чтобы на маленьком экране с большим количеством текста секция росла. При фиксированной высоте содержимое, которое не помещается, вылезает наружу, и этим занимается свойство overflow в CSS.

Частые ошибки

height: 100% в родителе без высоты. Работает как auto. Задайте родителю высоту или используйте flex или grid.
width: 100% плюс padding. Элемент выходит за контейнер. Оставляйте ширину блоков auto или используйте box-sizing: border-box.
Фиксированная высота у текстовых контейнеров. Используйте min-height, чтобы длинный текст или крупный шрифт не вылезали.
width у строчного элемента. <span> и <a> игнорируют width и height; сделайте их inline-block или block.
width: 1200px у обертки страницы. На каждом телефоне появится горизонтальная прокрутка. Используйте max-width: 1200px.

Часто задаваемые вопросы

Почему не работает height: 100%?

Высота в процентах считается от высоты родителя и работает, только если эта высота определена. Если высота родителя auto (задается содержимым), процент трактуется как auto. Задайте родителю высоту или используйте flexbox или grid, которые растягивают дочерние элементы без процентов.

Чем отличается width: 100% от width: auto?

Для блочного элемента auto заполняет контейнер вместе с padding и рамкой. width: 100% делает ширину содержимого равной ширине контейнера, поэтому при box-sizing: content-box по умолчанию любой padding или рамка приводят к выходу элемента за контейнер.

Что делает min-height в CSS?

Задает наименьшую высоту элемента и при этом позволяет ему расти вместе с содержимым. min-height: 200px дает пустой карточке 200px, а карточка с большим количеством текста становится выше и не переполняется, чего фиксированная height не позволила бы.

Чем width отличается от max-width?

width задает точный размер. max-width задает верхний предел: элемент может быть уже, например на телефоне, но никогда не шире. width: 100%; max-width: 600px; заполняет маленькие экраны и останавливается на 600px на больших.

Как сделать элемент на всю высоту экрана?

Используйте min-height: 100vh (или 100dvh, чтобы учесть панели мобильного браузера). min-height вместо height позволяет секции вырасти, если содержимое выше экрана.

Связанные концепции