Dokumentacja CSS z przykładami: Width i height

Q: Czym różni się width: 100% od width: auto?

W elemencie blokowym auto wypełnia kontener łącznie z paddingiem i obramowaniem. width: 100% ustawia szerokość treści na szerokość kontenera, więc przy domyślnym box-sizing: content-box każdy padding lub obramowanie sprawia, że element wystaje poza kontener.

Q: Czym różni się width od max-width?

width ustawia dokładny rozmiar. max-width ustawia górną granicę: element może być węższy, na przykład na telefonie, ale nigdy szerszy. width: 100%; max-width: 600px; wypełnia małe ekrany i zatrzymuje się na 600px na dużych.

Q: Jak ustawić elementowi wysokość całego ekranu?

Użyj min-height: 100vh (albo 100dvh, żeby uwzględnić paski narzędzi przeglądarki na telefonie). min-height zamiast height pozwala sekcji urosnąć, jeśli jej treść jest wyższa niż ekran.

Ustawianie width i height

width i height ustawiają rozmiar obszaru treści elementu. Domyślnie padding i obramowanie są dodawane na zewnątrz tego rozmiaru.

<!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>

Pudełko ma 260 na 100 pikseli: 240 na 80 treści plus 10px paddingu z każdej strony. Z box-sizing: border-box miałoby dokładnie 240 na 80; strona o modelu pudełkowym wyjaśnia oba przypadki.

Wartości

Wartość	Przykład	Znaczenie
`auto`	`width: auto`	Wartość domyślna. Bloki wypełniają szerokość kontenera; wysokość dopasowuje się do treści
Długość	`300px`, `20rem`	Stały rozmiar
Procent	`50%`	Szerokości bloku zawierającego (dla `width`) lub jego wysokości (dla `height`)
Jednostki viewportu	`100vh`, `50vw`, `100dvh`	Okna przeglądarki
`min-content`	`width: min-content`	Tak wąsko, jak się da, decyduje najdłuższe słowo
`max-content`	`width: max-content`	Tak szeroko jak treść w jednym wierszu
`fit-content`	`width: fit-content`	Jak `max-content`, ale nigdy szerzej niż kontener

Dlaczego height: 100% nic nie robi

Procentowa height potrzebuje rodzica o określonej wysokości, od której można liczyć procent. Gdy rodzic ma wysokość auto, co jest normalną sytuacją, height: 100% dziecka też zachowuje się jak 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>

Pierwsze dziecko jest tylko tak wysokie jak jego tekst. Drugie wypełnia rodzica, bo rodzic ma wysokość. Żeby cały łańcuch na stronie działał z procentami, każdy przodek aż do html i body musi mieć wysokość, dlatego większość layoutów używa zamiast tego flexboxa lub grida: ich dzieci rozciągają się bez żadnych procentów.

min-height i max-width: rozmiary, które się dopasowują

Stałe rozmiary łatwo się psują: stała wysokość się przelewa, gdy tekst jest dłuższy niż zakładano, a stała szerokość jest za duża na telefon. Właściwości min- i max- ustawiają granice zamiast dokładnych rozmiarów.

Właściwość	Znaczenie
`min-width`	Nigdy węższy niż to
`max-width`	Nigdy szerszy niż to
`min-height`	Nigdy niższy niż to, ale może rosnąć
`max-height`	Nigdy wyższy niż to (nadmiar treści wystaje)

<!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>

Na ekranie węższym niż 360px, na przykład na telefonie, karty kurczą się razem z nim, bo max-width to tylko górny limit.

Gdy obowiązują jednocześnie rozmiar i granica, wygrywają granice: max-width wygrywa z width, a min-width wygrywa z max-width.

width: auto vs width: 100%

W elemencie blokowym zostawienie width na auto to prawie zawsze to, czego chcesz. auto mieści całe pudełko, razem z paddingiem i obramowaniem, w kontenerze. 100% sprawia, że treść jest tak szeroka jak kontener, a potem dodaje do tego padding i obramowanie:

<!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% wciąż przydaje się w elementach, które domyślnie nie są blokami (<input>, <img>, inline-block), najlepiej razem z box-sizing: border-box.

Rozmiar dopasowany do treści: fit-content

Żeby blok był tylko tak szeroki jak jego tekst, bez zmieniania go na inline-block, użyj 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 z margin-inline: auto wyśrodkowuje etykietę albo blok przypominający przycisk, który zachowuje dokładnie szerokość swojego tekstu.

Sekcje na pełną wysokość i jednostki viewportu

vh to 1% wysokości viewportu, a vw 1% jego szerokości. Na telefonach pasek adresu przeglądarki rośnie i maleje podczas przewijania, więc 100vh może być wyższe niż to, co widzisz. Dynamiczna jednostka dvh podąża za widocznym obszarem, a svh używa najmniejszej widocznej wysokości:

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

W sekcjach na cały ekran używaj min-height, a nie height, żeby na małym ekranie z dużą ilością tekstu sekcja nadal mogła rosnąć. Stała wysokość z treścią, która się nie mieści, powoduje jej wylewanie się, a tym zajmuje się strona o overflow w CSS.

Częste błędy

height: 100% w rodzicu bez wysokości. Działa jak auto. Nadaj rodzicowi wysokość albo użyj flexa lub grida.
width: 100% plus padding. Element wystaje poza kontener. Zostaw szerokość bloków na auto albo użyj box-sizing: border-box.
Stałe wysokości w kontenerach z tekstem. Użyj min-height, żeby dłuższy tekst lub większa czcionka nie wylewały się na zewnątrz.
width na elemencie inline. <span> i <a> ignorują width i height; zmień je na inline-block lub block.
width: 1200px na kontenerze strony. Na każdym telefonie strona przewija się w bok. Użyj zamiast tego max-width: 1200px.

Najczęściej zadawane pytania

Dlaczego height: 100% nie działa?

Wysokość procentowa to procent wysokości rodzica i działa tylko wtedy, gdy ta wysokość jest określona. Jeśli rodzic ma wysokość auto (zależną od treści), procent jest traktowany jak auto. Nadaj rodzicowi wysokość albo użyj flexboxa lub grida, które rozciągają dzieci bez procentów.

Czym różni się width: 100% od width: auto?

W elemencie blokowym auto wypełnia kontener łącznie z paddingiem i obramowaniem. width: 100% ustawia szerokość treści na szerokość kontenera, więc przy domyślnym box-sizing: content-box każdy padding lub obramowanie sprawia, że element wystaje poza kontener.

Co robi min-height w CSS?

Ustawia najmniejszą wysokość, jaką może mieć element, i nadal pozwala mu rosnąć razem z treścią. min-height: 200px daje pustej karcie 200px, a karta z większą ilością tekstu robi się wyższa zamiast się przelewać, na co stała height by nie pozwoliła.

Czym różni się width od max-width?

width ustawia dokładny rozmiar. max-width ustawia górną granicę: element może być węższy, na przykład na telefonie, ale nigdy szerszy. width: 100%; max-width: 600px; wypełnia małe ekrany i zatrzymuje się na 600px na dużych.

Jak ustawić elementowi wysokość całego ekranu?

Użyj min-height: 100vh (albo 100dvh, żeby uwzględnić paski narzędzi przeglądarki na telefonie). min-height zamiast height pozwala sekcji urosnąć, jeśli jej treść jest wyższa niż ekran.

Powiązane zagadnienia