Traducción de "
Anchura y altura mínimas y máximas en CSS " por Ahmad Shadid.
A veces, los desarrolladores necesitan limitar el ancho del elemento en relación con el elemento primario y, al mismo tiempo, dejarlo dinámico. Al establecer de esta manera el tamaño inicial con la posibilidad de expansión en presencia de espacio disponible. Por ejemplo, necesitamos un botón que debe tener un ancho mínimo. Es en tales situaciones que es conveniente utilizar las propiedades de máximo y mínimo.
En este artículo, nos familiarizaremos con las propiedades CSS del máximo y mínimo para el ancho y la altura, y también veremos en detalle cada uno de ellos y sus casos de uso.
Propiedades de ancho
Me gustaría comenzar la discusión con las propiedades relacionadas con el ancho. Tenemos
min-width max-width, y cada uno de ellos es extremadamente importante y útil en ciertas situaciones.
Ancho mínimo (ancho mínimo)
La propiedad
min-width está destinada a evitar que el ancho del elemento se reduzca por debajo del valor especificado. El valor predeterminado es
auto , que puede subir hasta
0 .
Para demostrarlo, veamos un ejemplo básico:
Hay un botón con texto, cuyo tamaño puede variar de una a varias palabras. Para asegurarse de que este botón tendrá el ancho mínimo permitido, incluso si solo hay una palabra dentro, debe usar
min-width . El ancho mínimo se estableció en 100 píxeles, por lo que incluso si el botón tiene un contenido muy corto, como solo la palabra "Listo" o simplemente un icono, seguirá siendo lo suficientemente grande como para permanecer visible. Esto es especialmente importante cuando trabaja con sitios traducidos a diferentes idiomas.
Considere el ejemplo del idioma árabe en Twitter:
En el ejemplo anterior, el botón contiene la palabra "تم", que en árabe significa "Finalizar". Debido al contenido corto, el ancho del botón en sí mismo se hizo demasiado pequeño, por lo que establecí el mínimo estableciendo la propiedad de
min-width , que se puede ver en la imagen de la derecha (en la sección "Después").
Ancho mínimo y relleno
Aunque la propiedad de
min-width permite un aumento en el ancho del botón al tiempo que aumenta el tamaño de su contenido, el
padding aún debe establecerse en los lados para garantizar una sangría desde sus bordes. La diferencia se muestra en la figura a continuación.
Ancho máximo (ancho máximo)
La propiedad
max-width está diseñada para evitar que el elemento se expanda más allá del valor especificado. El valor predeterminado es
none .
Un ejemplo común y simple de usar max-width es aplicarlo a las imágenes. Considere el siguiente ejemplo:
Si aplicamos la propiedad
max-width: 100% a la imagen, permanecerá dentro de los límites del elemento padre, aunque su tamaño original sea mayor. Si la imagen es inicialmente más pequeña que la principal, esta propiedad no la afectará de ninguna manera.
Usando ancho mínimo y ancho máximo
Si ambas propiedades se aplican a un elemento, ¿cuál anulará el valor del otro? En otras palabras, ¿qué propiedad tiene mayor prioridad?
Si el valor de
min-width mayor que
max-width , se tomará como el ancho del elemento. Considere el siguiente ejemplo:
HTML <div class="wrapper"> <div class="sub"></div> </div>
CSS .sub { width: 100px; min-width: 50%; max-width: 100%; }
El valor de
width inicial es de 100 px y, además de esto, se establecen las propiedades de
max-width min-width max-width . Como resultado, el ancho de este elemento no excederá el 50% del ancho del bloque principal
Propiedades de altura
Además de las propiedades de ancho mínimo y máximo, existen las mismas propiedades para la altura
Altura mínima (altura mínima)
La
min-height diseñada para evitar que el elemento caiga por debajo del valor especificado. El valor predeterminado es
auto , que puede subir hasta
0 .
Para demostrarlo, veamos un ejemplo simple.
Tenemos una sección con contenido de texto. Es necesario que se vea hermoso con grandes y pequeñas cantidades de texto.
CSS .sub { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 100px; color: #fff; background: #3c78dB; }
La altura mínima se establece en 100px, y el contenido se centra usando el flexbox horizontal y verticalmente. ¿Qué pasa si hay más contenido? Por ejemplo, habrá un párrafo completo
Sí, ya lo has adivinado. La altura de la sección aumentará para acomodar más contenido. Con esto, podemos crear componentes flexibles que respondan a la cantidad de contenido.
Altura máxima (altura máxima)
La
max-height diseñada para evitar que un elemento aumente su altura más allá de un valor especificado. El valor predeterminado es
none .
En el siguiente ejemplo, configuro
max-height para el contenido. Pero como es más grande que el área especificada, se produce un desbordamiento y el texto va más allá de los límites del elemento padre
Ejemplos de uso de propiedades
Considere algunos casos de uso comunes y raros para las propiedades
min-width ,
min-height ,
max-width y
max-height .
Lista de etiquetas
Se recomienda indicar el ancho mínimo de cada etiqueta en la lista de etiquetas para que su apariencia no sufra en caso de contenido corto.
Con tal flexibilidad, una etiqueta se verá bien sin importar cuán corto sea su contenido. Pero, ¿qué sucede si el autor establece un nombre de etiqueta muy grande y el CMS (sistema de administración de contenido) que usa no tiene límite en la cantidad de caracteres en la etiqueta? En esta situación, también puede usar
max-widthCSS .c-tag { display: inline-block; min-width: 100px; max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Usando
max-width puede limitar el ancho máximo a un valor específico. Sin embargo, aplicar esta propiedad solo no es suficiente. El contenido que exceda el ancho máximo debe truncarse.
https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16Botones
Existen diferentes escenarios para usar las propiedades mínimas y máximas de los botones, ya que también hay muchas opciones para los componentes de los botones. Considere el siguiente diseño:
Tenga en cuenta que el ancho del botón "Obtener" es demasiado pequeño. Si por alguna razón el botón aún no tiene texto (sino solo un ícono), todo puede empeorar aún más. En este caso, establecer el ancho mínimo es muy importante
Reducción a cero del ancho mínimo para Flexbox
El valor predeterminado de la propiedad
min-width es auto, que se evalúa a cero. Cuando un elemento es un elemento flexible, el valor de
min-width no se convierte en cero. El tamaño mínimo de un elemento flexible es el tamaño de su contenido.
De acuerdo con
CSSWG :
De forma predeterminada, los elementos flexibles no se hacen más pequeños que el tamaño mínimo requerido por su contenido (la longitud de la palabra más larga o elemento con un tamaño fijo). Para cambiar esto, establezca la
min-height min-width o
min-height .
Considere el siguiente ejemplo:
El nombre de usuario contiene una palabra muy larga que causa desbordamiento y desplazamiento horizontal. Aunque agregué el CSS a continuación para truncar el contenido:
CSS .c-person__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
Dado que el encabezado es un elemento flexible, la solución es restablecer el valor de ancho mínimo y hacer que sea cero
CSS .c-person__name { min-width: 0; }
Así es como debería verse después de la solución:
De la descripción de
CSSWG se deduce que establecer la propiedad de
overflow en un valor que no sea
visible puede hacer que el valor de ancho mínimo se calcule como cero, lo que también resuelve nuestro problema sin tener que establecer explícitamente el
min-width: 0 .
Altura mínima cero para Flexbox
Aunque este es un problema menos común en comparación con el ancho mínimo, aún puede ocurrir. El problema es con los elementos flexibles que no pueden ser más cortos que su contenido. Como resultado, el valor de
min-height se establece igual al tamaño del contenido.
Considere el siguiente ejemplo:
El texto en rojo debe recortarse por los bordes del contenedor. Pero como este elemento es un elemento flexible, su
min-height es igual a la altura del contenido. Para evitar esto, debemos restablecer el valor mínimo de altura. Veamos el código HTML y CSS:
HTML <div class="c-panel"> <h2 class="c-panel__title"></h2> <div class="c-panel__body"> <div class="c-panel__content"></div> </div> </div>
CSS .c-panel { display: flex; flex-direction: column; height: 180px; } .c-panel__body { min-height: 0; } .c-panel__content { overflow-y: scroll; height: 100%; }
Agregar un elemento
min-height: 0 restablecerá el valor de la propiedad y comenzará a funcionar como se esperaba
Demo
Usando ancho mínimo y ancho máximo al mismo tiempo
A veces hay situaciones en las que tenemos un elemento con un ancho mínimo, pero al mismo tiempo, no se especifica el ancho máximo. Esto puede hacer que el elemento se ensanche demasiado, aunque este comportamiento no fue intencionado. Considere el siguiente ejemplo:
Dado que el ancho se define en píxeles, no hay certeza de que lo anterior funcione para dispositivos móviles. Para resolver este problema, podemos usar porcentajes en lugar de píxeles para las propiedades mínimas y máximas. Considere el siguiente ejemplo:
Agregué el siguiente CSS para las imágenes:
CSS img { min-width: 35%; max-width: 70%; }
Contenedor de página
Uno de los escenarios más útiles para usar la propiedad
max-width es ajustar la página (o contenedor). Al configurar la página al ancho máximo, podemos estar seguros de que será conveniente para los usuarios ver y leer el contenido
A continuación se muestra un ejemplo de una envoltura centrada con
padding izquierdo y derecho.
CSS .wrapper { max-width: 1170px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; }
Ancho máximo y unidad de medida "ch"
La unidad de medida
ch es igual al ancho del carácter
0 (cero) utilizado en la fuente del elemento actual. Utilizándolo en la propiedad de ancho máximo, podemos ajustar el número de caracteres en una cadena. Según este artículo de la revista Smashing, la longitud de línea recomendada es de 45 a 75 caracteres.
En el ejemplo anterior con un elemento contenedor, podríamos beneficiarnos del uso de este símbolo, ya que es un elemento artículo
CSS .wrapper { max-width: 70ch; }
Animar un elemento con una altura desconocida
A veces nos enfrentamos al problema de animar un acordeón o un menú móvil con una altura de contenido desconocida. En este caso, usar
max-height podría ser una buena solución.
Considere el siguiente ejemplo:
Cuando se presiona el botón de menú, el menú en sí debería aparecer suavemente de arriba a abajo. Es imposible hacer esto sin JavaScript, a menos que el elemento tenga una altura fija (y esto no se recomienda). Sin embargo, esto es posible con max-height. La idea es agregar una altura muy alta al elemento, por ejemplo,
max-height: 20rem , que no se alcanzará, después de lo cual podemos establecer los pasos de animación de
max-height: 0 , a
max-height: 20remCSS .c-nav { max-height: 0; overflow: hidden; transition: 0.3s linear; } .c-nav.is-active { max-height: 22rem; }
Haga clic en una hamburguesa para ver la animación en acción.
Altura mínima para la sección superior (héroe)
Como puede ver, no me gusta dar a los elementos una altura fija. Creo que, al hacerlo, voy en contra del concepto de que los componentes en la web deben ser flexibles. Agregar una altura mínima para la primera sección del sitio (la sección "héroe") es útil en situaciones en las que se agrega contenido muy grande (esto sucede).
Considere el siguiente ejemplo, donde tenemos una sección de "héroe" con una altura fija. Se ve bien
Sin embargo, cuando el contenido crece, desborda el contenedor y va más allá del contenedor de sección. Esto es malo
Para evitar este problema de antemano, podemos agregar
min-height lugar de
min-height . Hacemos exactamente eso, al menos para despejar nuestra conciencia. Aunque esta puede ser la razón de una visualización de página bastante extraña, creo que tales situaciones deberían evitarse en primer lugar, en el sistema de gestión de contenido (CMS). Después de eso, el problema se soluciona y la página se ve bien:
El problema del desbordamiento de contenido no es solo que puede ser mayor que la altura fija del padre. Esto puede suceder como resultado de una disminución en el tamaño de la pantalla y, como resultado, un aumento en la altura del contenido del texto debido a la separación silábica:
Si no especifica una altura fija, pero solo la limita al mínimo usando
min-height mínima, el problema descrito anteriormente no ocurrirá en absoluto.
Ventana modal
Para el componente de ventana modal, debe especificar el ancho mínimo y máximo, por lo tanto, esto funcionará en pantallas de cualquier tamaño (desde dispositivos móviles hasta computadoras de escritorio). Esto recuerda a un interesante artículo sobre CSS-Tricks, que dice qué hacer en este caso.
1 camino .c-modal__body { width: 600px; max-width: 100%; }
2 vías .c-modal__body { width: 100%; max-width: 600px; }
En cuanto a mí, prefiero la segunda forma, ya que solo necesito definir
max-width: 600px . Una ventana modal es un elemento
div , por lo que ya tiene un ancho establecido = 100% del padre, ¿verdad?
Considere el siguiente ejemplo de ventana modal. Observe cómo el ancho se convierte en el 100% del ancho del padre si no hay suficiente espacio libre en la ventana gráfica
Altura mínima y pie de página adhesivo
Cuando el contenido de la página no es lo suficientemente grande, no se espera que el pie de página se quede en la parte inferior. Veamos un ejemplo que lo demuestra mejor:
Tenga en cuenta que el pie de página no se adhiere al borde inferior de la ventana del navegador. Esto se debe a que la altura del contenido es menor que la altura de la ventana del navegador. Después de resolver este problema, la página debería verse así:
Primero, convertí el elemento del cuerpo en un contenedor flexible y luego lo configuré a una altura mínima del 100% de la ventana gráfica.
CSS body { display: flex; flex-direction: column; min-height: 100vh; } footer { margin-top: auto; }
Recomiendo leer este
artículo sobre pies de página adhesivos.
DemoTamaños de elementos proporcionales y ancho / alto máximo
Para hacer un contenedor proporcional que se escale dependiendo del tamaño de la ventana gráfica, una vez se presentó un
hack con relleno . Ahora podemos simular un comportamiento similar combinando unidades de ventana gráfica y ancho / alto máximo.
Basado en materiales de un
artículo de Miriam Suzanne, quiero explicar cómo funciona esto.
Tenemos una imagen con dimensiones de 644 x 1000 píxeles. Necesitamos hacer lo siguiente:
- Relación de aspecto:
height / width (altura dividida por el ancho)
- Ancho del contenedor: puede ser fijo o dinámico (100%)
- Establezca la
height al 100% del ancho de la vista multiplicado por la relación de aspecto
- Establezca
max-height igual al ancho del contenedor por la relación de aspecto
- Establecer
max-width igual al ancho del contenedor
CSS img { --ratio: 664 / 1000; --container-width: 30em; display: block; height: calc(100vw * var(--ratio)); max-height: calc(var(--container-width) * var(--ratio)); width: 100%; max-width: var(--container-width); }
HTML / Cuerpo con una altura del 100%
¿Qué sucede si queremos que el elemento del cuerpo ocupe el 100% de la altura de la ventana gráfica? Esta es una pregunta común tanto en la comunidad web en general como
en el sitio StackOverflow en particular.
Primero debe establecer la
height: 100% para el elemento
html . Esto asegurará que el elemento raíz sea 100% alto. Luego agregue
min-height para el elemento del
body . La razón por la que se usa
min-height es porque esta propiedad permite que la altura del elemento del
body sea dinámica y ajuste el tamaño del contenido.
CSS html { height: 100%; } body { min-height: 100%; }
DemoNotas
Ancho mínimo y elementos de bloque
A veces olvidamos que el elemento al que estamos tratando de aplicar
min-width es el bloque. Al final, esto puede ser confuso y no afectar el elemento. Asegúrese de que el artículo no esté bloqueado
Funciones de comparación de CSS
Mientras investigaba en StackOverflow los principales problemas que enfrentan los desarrolladores, me encontré con esta pregunta en la que el autor pregunta lo siguiente:
¿Es posible hacer algo como esto? max-width: calc(max(500px, 100% - 80px)) o tal vez este es max-width: max(500px, calc(100% - 80px)))
El comportamiento deseado es mantener el ancho del elemento no más de 500 px. Si el ancho del alcance no es suficiente para acomodar el elemento, entonces el ancho debe ser
100% – 80px .
En cuanto a la solución publicada en respuesta a la pregunta, intenté aplicarla y funciona en Chrome 79 y Safari 13.0.3. Aunque esto está más allá del alcance del artículo, aún daré una solución aquí:
CSS .yourselector { max-width: calc(100% - 80px); } @media screen and (max-width: 580px) { .yourselector { max-width: 500px; } }
Fuentes y materiales para estudios posteriores.