Share
Hay un problema familiar en el diseño web que ha existido desde que pasamos de los días del diseño basado en tablas a la era CSS, y es el siguiente:
¿Cómo puedo tener fondos con una altura del 100% en mi diseño flexible de varias columnas??
Hay algunas soluciones a este dilema. Sin embargo, el que estamos a punto de cubrir puede ser adecuado para su proyecto si necesita:
Una opción es solicitar uno de los servicios de personalización de sitios web rápidos y eficientes de Envato Studio. Puede elegir entre una variedad de proveedores experimentados, revisar sus revisiones y luego enviarles detalles de las modificaciones exactas que necesita.
De lo contrario, comencemos con una mirada rápida al problema..
En la imagen de abajo se muestra un diseño simple de tres columnas, utilizando un enfoque estándar de flotar cada columna a la izquierda. Con los fondos aplicados en la forma predeterminada, las columnas se ajustan a la altura de su contenido de esta manera:
Esto es funcional, pero no es el diseño más agradable a la vista debido a la diferencia significativa en las alturas..
El HTML para lo anterior coloca tres elementos de "contenido de columna" dentro de un contenedor:
.........
El CSS para estos elementos de "contenido de columna" es:
.contenido ancho: 60%; flotador izquierdo; relleno: 20px 30px; fondo: #fff; color: # 6d7072; .sidebar ancho: 20%; flotador izquierdo; relleno: 20px 30px; fondo: # 5f6673; color: # ebeef3; tamaño de letra: 90%; .sidebar_two ancho: 20%; flotador izquierdo; relleno: 20px 30px; fondo: # 434750; color: # ebeef3; tamaño de letra: 90%;
Cuando nos referimos a columnas de igual altura, lo que normalmente queremos es satisfacer dos condiciones:
En nuestro ejemplo anterior ya tenemos la primera condición de altura flexible satisfecha. Sin embargo, los estilos de fondo y las reglas de altura flexibles forman parte de la misma clase y se aplican al mismo elemento. Cualquiera que sea la regla de altura que siga ese elemento, el fondo también las seguirá.
Por lo tanto, si queremos que los fondos tengan diferentes configuraciones de altura, necesitaremos elementos separados, podemos aplicar los estilos de fondo junto con su propio conjunto de reglas de altura. Para crear estos elementos separados sin agregar ningún marcado adicional, vamos a utilizar pseudo-elementos.
Para cada columna utilizaremos la :antes de pseudo-selector para generar un pseudo-elemento separado, al que aplicaremos un estilo de fondo. Luego usaremos una combinación de posicionamiento absoluto y índice z para colocar estos fondos detrás del contenido de cada columna y establecerlos en una altura uniforme.
El nuevo CSS para cada columna se convierte en:
.contenido,. contenido: antes ancho: 60%; .content float: left; relleno: 20px 30px; color: # 6d7072; .contenido: antes contenido: "; posición: absoluta; parte superior: 0; parte inferior: 0; índice z: -1; izquierda: 0; fondo: #fff;
.barra lateral,. barra lateral: antes ancho: 20%; .sidebar float: left; relleno: 20px 30px; color: # ebeef3; tamaño de letra: 90%; . barra lateral: antes de contenido: "; posición: absoluta; parte superior: 0; parte inferior: 0; índice z: -1; izquierda: 60%; color de fondo: # 5f6673;
.sidebar_two, .sidebar_two: antes ancho: 20%; .sidebar_two float: left; relleno: 20px 30px; color: # ebeef3; tamaño de letra: 90%; .sidebar_two: antes de contenido: "; posición: absoluta; superior: 0; inferior: 0; índice z: -1; izquierda: 80%; color de fondo: # 434750;
Lo que nos da una presentación de alturas agradables, incluso de columna:
En pocas palabras, lo que estamos haciendo aquí es posicionar absolutamente los pseudo-elementos "de fondo" detrás de los elementos de "contenido de columna" regulares para crear estilos de fondo..
Debido a que estos pseudo-elementos de "soporte de fondo" están posicionados de manera absoluta, podemos decirles exactamente dónde deben estar sus bordes exteriores, mientras que aún permitimos que los elementos de "contenido de columna" tengan cualquier altura o anchura que deban estar.
los 
Accentsconagua
.envolver Elemento, sus tres elementos hijos y sus pseudo-elementos.
Cada elemento de columna tiene un pseudo-elemento correspondiente, que actúa como fondoImportante:Sus columnas deben estar dentro de un envoltorio principal (.envolver en este caso) configurado en posición: relativa; para que el posicionamiento absoluto funcione. Esto debería desaparecer después de las columnas flotantes para garantizar que reciba un valor de altura para que los fondos se extiendan a.
Hay un par de excelentes enfoques que sugieren otras formas de resolver este problema. Si no necesita las ventajas específicas de este enfoque, puede preferir una de las siguientes soluciones.
Si planea usar solo colores planos en sus fondos, entonces una solución muy inteligente es aplicar un degradado de CSS horizontal, creando bandas de color para alinearse con sus columnas. Echa un vistazo a cómo, gracias a Chris Coyier.
Sin embargo, si su diseño necesita imágenes, bordes, efectos CSS3, etc., aplicados a sus fondos, nuestra técnica div de "soporte de fondo" puede ser una mejor opción, por ejemplo.
Otra solución muy interesante es utilizar los pseudo selectores. :antes de y :después en el contenedor primario de las columnas para crear hasta tres columnas con fondos de igual altura. Puedes leer sobre esta técnica, explicada por Nicolas Gallagher..
Por otro lado, si necesita más de tres columnas, es posible que desee utilizar nuestra técnica de "soporte de fondo", ya que puede tener tantas columnas como desee. p.ej.
Una vez que veamos un soporte generalizado del navegador para flexbox, debería ser bastante sencillo hacer cosas como esta sin tener que depender de pseudo-elementos.
Sin embargo, entre ahora y entonces, esta es una excelente manera de hacer el trabajo. Le permite mantener un ancho flexible para diseños sensibles, usar tantas columnas como desee y aplicar cualquier tipo de estilo de fondo.
