CSS: “min-height”: Demasiados valores o los valores no se reconocen.

La propiedad min-height establece la altura mínima de un elemento. A diferencia de las propiedades abreviadas como margin o padding, min-height acepta solo un único valor. Proporcionar múltiples valores separados por espacios (ej., min-height: 100px 200px) es inválido y desencadenará este error.

Este error ocurre comúnmente por varias razones:

• Múltiples valores proporcionados: min-height no es una propiedad abreviada y no acepta más de un valor.
• Unidades inválidas o errores tipográficos: Usar una unidad no reconocida (ej., 100pixels en lugar de 100px) o una palabra clave mal escrita.
• Usar funciones CSS o sintaxis no soportadas: Algunas características CSS más nuevas como min-height: fit-content(200px) pueden no ser reconocidas por el validador o pueden carecer de soporte del navegador.
• Confundir min-height con otras propiedades: Usar accidentalmente sintaxis destinada a propiedades como grid-template-rows o expresiones minmax().
• Faltan unidades en valores distintos de cero: Escribir min-height: 100 en lugar de min-height: 100px. Cero es el único valor numérico que no requiere una unidad.

Según la especificación CSS, los valores válidos para min-height incluyen:

Tipo de valor	Ejemplos
Longitud	0, 100px, 10em, 5rem, 50vh
Porcentaje	50%, 100%
Palabras clave	auto, min-content, max-content, none
Funciones	fit-content, calc(100vh - 50px)

Solucionar este problema asegura que tu CSS cumpla con los estándares y se comporte de manera predecible en todos los navegadores. Los valores inválidos de min-height serán ignorados por los navegadores, lo que significa que tu diseño puede no renderizarse como se pretendía.

Ejemplos

Incorrecto: múltiples valores

<div style="min-height: 100px 200px;">Contenido</div>

min-height solo acepta un único valor. Esta no es una propiedad abreviada.

Incorrecto: falta la unidad

<div style="min-height: 100;">Contenido</div>

Los valores numéricos distintos de cero deben incluir una unidad.

Incorrecto: palabra clave inválida o error tipográfico

<div style="min-height: inheret;">Contenido</div>

La palabra clave inherit está mal escrita.

Correcto: valor de longitud único

<div style="min-height: 100px;">Contenido</div>

Correcto: valor porcentual

<div style="min-height: 50%;">Contenido</div>

Correcto: usar calc() para valores calculados

<div style="min-height: calc(100vh - 80px);">Contenido</div>

Correcto: usar una palabra clave

<div style="min-height: min-content;">Contenido</div>

Correcto: usar auto

<div style="min-height: auto;">Contenido</div>

Si necesitas establecer tanto una altura mínima como máxima en un elemento, usa min-height y max-height como propiedades separadas:

<div style="min-height: 100px; max-height: 400px;">Contenido</div>

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios