Docs ejecutables de CSS: Width y height

Q: ¿Qué diferencia hay entre width: 100% y width: auto?

En un elemento de bloque, auto ocupa el contenedor incluidos su padding y su borde. width: 100% hace que el ancho del contenido sea igual al del contenedor, así que con el box-sizing: content-box por defecto cualquier padding o borde hace que el elemento se desborde.

Q: ¿Qué diferencia hay entre width y max-width?

width define un tamaño exacto. max-width define un límite superior: el elemento puede ser más angosto, por ejemplo en un teléfono, pero nunca más ancho. width: 100%; max-width: 600px; ocupa las pantallas pequeñas y se detiene en 600px en las grandes.

Q: ¿Cómo hago que un elemento ocupe toda la altura de la pantalla?

Usa min-height: 100vh (o 100dvh para tener en cuenta las barras del navegador en el celular). min-height en lugar de height permite que la sección crezca si su contenido es más alto que la pantalla.

Definir width y height

width y height definen el tamaño de la caja de contenido de un elemento. Por defecto, el padding y el borde se suman por fuera de ese tamaño.

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

La caja mide 260 por 100 píxeles: 240 por 80 de contenido más 10px de padding en cada lado. Con box-sizing: border-box, mediría exactamente 240 por 80; la página del modelo de caja explica los dos casos.

Valores

Valor	Ejemplo	Significado
`auto`	`width: auto`	El valor por defecto. Los bloques ocupan el ancho de su contenedor; la altura se ajusta al contenido
Longitud	`300px`, `20rem`	Un tamaño fijo
Porcentaje	`50%`	Del ancho del bloque contenedor (para `width`) o de su alto (para `height`)
Unidades de viewport	`100vh`, `50vw`, `100dvh`	De la ventana del navegador
`min-content`	`width: min-content`	Lo más angosto posible, decide la palabra más larga
`max-content`	`width: max-content`	Tan ancho como el contenido en una sola línea
`fit-content`	`width: fit-content`	Como `max-content`, pero nunca más ancho que el contenedor

Por qué height: 100% no hace nada

Una height en porcentaje necesita un padre con una altura definida del cual ser porcentaje. Cuando la altura del padre es auto, que es el caso normal, el height: 100% del hijo también se comporta como 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>

El primer hijo solo mide lo que su texto. El segundo ocupa todo su padre porque el padre tiene una altura. Para que una página entera funcione con porcentajes, todos los ancestros hasta html y body necesitan una altura, y por eso la mayoría de los layouts usan flexbox o grid: sus hijos se estiran para ocupar el espacio sin ningún porcentaje.

min-height y max-width: tamaños que se adaptan

Los tamaños fijos se rompen con facilidad: una altura fija se desborda cuando el texto es más largo de lo esperado, y un ancho fijo es demasiado ancho para un teléfono. Las propiedades min- y max- definen límites en lugar de tamaños exactos.

Propiedad	Significado
`min-width`	Nunca más angosto que esto
`max-width`	Nunca más ancho que esto
`min-height`	Nunca más bajo que esto, pero puede crecer
`max-height`	Nunca más alto que esto (el contenido extra se desborda)

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

En una pantalla de menos de 360px, como la de un teléfono, las tarjetas se encogen con ella, porque max-width es solo un techo.

Cuando se aplican a la vez un tamaño y un límite, ganan los límites: max-width le gana a width, y min-width le gana a max-width.

width: auto vs width: 100%

En un elemento de bloque, dejar width en auto es casi siempre lo que quieres. auto hace caber toda la caja, padding y borde incluidos, en el contenedor. 100% hace que el contenido sea tan ancho como el contenedor y luego suma el padding y el borde por encima:

<!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% sigue siendo útil en elementos que por defecto no son bloques (un <input>, un <img>, un inline-block), idealmente junto con box-sizing: border-box.

Ajustar el tamaño al contenido: fit-content

Para que un bloque sea solo tan ancho como su texto, sin cambiarlo a inline-block, usa 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 con margin-inline: auto centra una etiqueta o un bloque tipo botón que mantiene exactamente el ancho de su texto.

Secciones de altura completa y unidades de viewport

vh es el 1% de la altura del viewport y vw el 1% de su ancho. En los teléfonos, la barra de direcciones del navegador crece y se encoge al desplazarte, así que 100vh puede ser más alto que lo que ves. La unidad dinámica dvh sigue el área visible, y svh usa la altura visible más pequeña:

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

Usa min-height, no height, para las secciones de pantalla completa, así una pantalla pequeña con mucho texto sigue teniendo una sección que crece. Una altura fija con contenido que no cabe hace que se desborde, y de eso se encarga la página de overflow en CSS.

Errores comunes

height: 100% dentro de un padre sin altura. Actúa como auto. Dale una altura al padre o usa flex o grid.
width: 100% más padding. El elemento se sale de su contenedor. Deja los anchos de bloque en auto, o usa box-sizing: border-box.
Alturas fijas en contenedores de texto. Usa min-height para que un texto más largo o una fuente más grande no se desborde.
width en un elemento inline. <span> y <a> ignoran width y height; hazlos inline-block o block.
width: 1200px en el contenedor de la página. Genera desplazamiento lateral en todos los teléfonos. Usa max-width: 1200px.

Preguntas frecuentes

¿Por qué no funciona height: 100%?

Una altura en porcentaje es un porcentaje de la altura del padre, y solo funciona cuando esa altura está definida. Si la altura del padre es auto (depende de su contenido), el porcentaje se trata como auto. Dale una altura al padre, o usa flexbox o grid, que estiran a los hijos sin porcentajes.

¿Qué diferencia hay entre width: 100% y width: auto?

En un elemento de bloque, auto ocupa el contenedor incluidos su padding y su borde. width: 100% hace que el ancho del contenido sea igual al del contenedor, así que con el box-sizing: content-box por defecto cualquier padding o borde hace que el elemento se desborde.

¿Qué hace min-height en CSS?

Define la altura mínima que puede tener un elemento y le sigue permitiendo crecer con su contenido. min-height: 200px le da 200px a una tarjeta vacía, y una tarjeta con más texto se vuelve más alta en lugar de desbordarse, algo que una height fija no permitiría.

¿Qué diferencia hay entre width y max-width?

width define un tamaño exacto. max-width define un límite superior: el elemento puede ser más angosto, por ejemplo en un teléfono, pero nunca más ancho. width: 100%; max-width: 600px; ocupa las pantallas pequeñas y se detiene en 600px en las grandes.

¿Cómo hago que un elemento ocupe toda la altura de la pantalla?

Usa min-height: 100vh (o 100dvh para tener en cuenta las barras del navegador en el celular). min-height en lugar de height permite que la sección crezca si su contenido es más alto que la pantalla.

Conceptos relacionados