Diseño de cuadrícula CSS: cuadrícula de tres filas

Tengo curiosidad de que sea posible usar el CSS de diseño de cuadrícula para crear tal cosa:

************************ * row #1 * ************************ * * * * * row #2 * * * * * ************************ * row #3 * ************************ 

Entonces, la cuadrícula debe llenar toda la altura del cuerpo. Y también hay algunas restricciones para otros elementos:

  • La fila # 1 está alineada con la parte superior de la cuadrícula y puede cambiar su altura (pero tiene un valor de altura máxima)
  • La fila 3 está alineada con la parte inferior y puede cambiar su altura (también tiene un valor de altura máxima)
  • Entonces la fila # 2 debe llenar todo el espacio restante en la grilla.
  • El contenedor de la grilla no debe desbordar el cuerpo html.

Hay un ejemplo de lo que logré: diseño de cuadrícula de 3 filas . También puedo hacer todo con una posición absoluta como esta, pero no sirve de nada porque puedo calcular automáticamente los márgenes de la fila n. ° 2 sin ningún código js imperativo.

Puede hacer esto con display:table propiedad de la display:table Ver especificaciones y compatibilidad

Demo de trabajo

CSS

 #container { display:table; } #head, #content, #foot { display:table-row; } 

Editar:

Fiddle actualizado

Se agregó div dentro table-row para evitar el overflow

Veo que la pregunta original está marcada como respondida, pero como el original incluía un bash de usar el módulo Diseño de cuadrícula CSS para resolver el problema, pensé que completaría las respuestas con algunas soluciones utilizando estándares más nuevos.

Usando flexbox

Primero que nada, este tipo de diseño es bastante fácil usando flexbox. La propiedad flex-grow permite definir elementos que llenen el espacio restante de esta forma. Ejemplo de JSBin usando flexbox aquí

Nota: No se usan todos los prefijos (por ejemplo, para apuntar a IE10, etc.) en la demostración rápida, pero si usa algo como autoprefixer, es algo trivial. Además, ten cuidado con los errores relacionados con elementos como las unidades vh en iOS y las columnas flexbox de altura mínima en IE .

Uso del diseño de cuadrícula

Nota: ¡Esta demostración solo funcionará en Chrome Canary en el momento en que se escribió la respuesta!

El diseño de la red está mejorando el ritmo y la especificación se ha estabilizado un poco. Chrome Canary tiene una implementación bastante avanzada, al igual que las comstackciones nocturnas de WebKit.

El diseño de cuadrícula tiene el mismo tipo de tamaño flexible que flexbox, y en su lugar mueve el mecanismo de diseño al elemento contenedor. Demostración de JSBin : recuerde, Chrome Canary solo en el momento de la redacción. (Funcionaría en WebKit también con los prefijos correctos).

Básicamente, todo se reduce a estas líneas:

 body { margin: 0; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; height: 100vh; } 

Lo anterior significa “Usar el elemento del cuerpo como un contenedor de cuadrícula, colocar elementos en él en orden de origen, en una sola columna que sea 100% de ancho, y medir la primera y la tercera fila de acuerdo con el contenido, y el del medio ocupa todo espacio que queda “. No es necesario que coloquemos específicamente los elementos dentro de la grilla: se ubicarán automáticamente; podríamos cambiar el orden, etc., si quisiéramos. ¡El diseño de cuadrícula puede hacer muchas cosas más avanzadas!

La mayoría de los proveedores de navegadores están trabajando para finalizar sus primeras implementaciones de grid, por lo que es divertido y útil comenzar a jugar con él. 🙂 Hasta entonces, la versión de flexbox te ofrece una buena compatibilidad con el navegador.

¿Qué tal establecer porcentajes de alturas como este?

 .head{ height:10%; max-height: /*max height allowed*/; } .content{ height:80%; max-height: /*max height allowed*/; } .foot{ height:10%; max-height: /*max height allowed*/; }