Ejemplo de maquetación con la altura completa de la página, height 100% con CSS grid Layout y Flexbox y además sin desplazamiento o scroll vertical en caso que el contenido sea muy grande.
Desde que tenemos con nosotros los estándares de Flexbox y CSS Grid Layout es posible hacer de manera relativamente sencilla maquetación de elementos de la página con formatos complejos, que antes resultaba bastante complicado.
Sobre todo cuando la maquetación incluye trabajo con las alturas de los elementos la cosa se complica. Porque con CSS 2 podíamos conseguir maquetación a columnas con los antiguos floats (mejor si no has tenido que pasar por ahí), pero ¿Qué pasa cuando quieres ajustar los contenidos en filas usando toda la vertical?
Por ejemplo, imagina que quieres conseguir una maquetación como la que tiene una aplicación de Whatsapp, con una parte fija arriba y abajo y una central que tiene scroll. Si los elementos de arriba y abajo son muy rígidos podrías maquetar las partes fijas con un position fixed y la parte central con un margen, pero esto no siempre es posible, porque igual tenes otros elementos que tienen que compartir espacio en la vertical y su contenido quizás sea variable, por lo que no puedes estar seguro de su altura.
Bueno, pues en este artículo vamos a ver cómo maquetar una página usando el 100% con varias partes de contenido variable arriba y abajo y el espacio sobrante en la altura, con una sección con contenido también variable y desplazamiento en la vertical.
Quienes están aprendiendo CSS lo pueden tomar como una práctica para complementar el Manual de maquetación CSS y quienes llegan aquí con una necesidad de maquetación en la vertical, en finas, les puede dar la solución a sus problemas, usando las dos posibilidades más potentes del CSS 3, Flexbox y Grid Layout.
El HTML para nuestro ejercicio
Comenzamos viendo el marcado de este ejercicio, con un código HTML que será exactamente igual tanto para la solución con Flexbox y CSS Grid Layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maquetación vertical por filas</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header>
<h1>Esto es el header</h1>
</header>
<div class="main">
<div class="video">
Este área también es fija, pero podría tener una altura variable en función del contenido, más o menos texto, una imagen, un vídeo, que pueden tener alturas variables, también en función de la anchura de la ventana del navegador o de la pantalla del móvil.
</div>
<section>
<div class="messages">
<p>Lorem ipsum dolor sit amet… te recomiendo poner aquí un texto largo para que consigas hacer scrol. ¿Sabes generar un "lorem ipsuml"?</p>
<p>Pon más párrafos para que se rellene este espacio.</p>
<p>Y puedas tener una maquetación con desplazamiento.</p>
</div>
<div class="actions">
<input type="text" name="" id="">
</div>
</section>
</div>
</body>
</html>
Este HTML lo puedes malear lo que necesites para que las distintas partes se adapten a lo que quieras o para demostrar lo flexible que es esta maquetación.
Soluciones de maquetación CSS
Ahora vamos a ver las soluciones de maquetación que podemos hacer para resolver este problema. Las dos usan técnicas distintas pero también atributos clave comunes de CSS.
Primero quiero asegurarme que conoces estos dos temas:
- El atributo Overflow de CSS
- Cómo usar el height 100% para ocupar todo el espacio en la altura de la ventana
Maquetar en filas con Flexbox
Comenzamos con la maquetación usando el estándar CSS Flexbox. Aquí lo que tenemos que saber es cómo distribuir las filas. Primero necesitamos que la distribución de los items se haga en columnas, con el flex-direction: column.
Para conseguir que unas ocupen todo el espacio que necesiten y otras que ocupen todo el disponible restante usamos un atributo de los item con display flex que se llama flex-grow. Pero también es muy importante que todos los elementos tengan el atributo overflow: auto.
El CSS es el siguiente:
* {
box-sizing: border-box;
}
html {
height: 100%;
max-height: 100%;
line-height: 1.7rem;
}
body {
padding: 0;
margin: 0;
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
justify-content: stretch;
}
header {
background-color: #eee;
padding: 0.8rem;
height: 50px;
}
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
h1 {
margin: 0.2rem 0;
}
.video {
}
section {
display: flex;
flex-direction: column;
overflow: hidden;
flex-grow: 1;
}
.messages {
flex-grow: 1;
height: 100%;
max-height: 100%;
background-color: #ffc;
overflow: auto;
}
.actions {
height: 50px;
}
Una de las claves de este CSS y del layout que queríamos conseguir es evitar que se genere una página muy larga con un scroll vertical en toda ella. En realidad queremos que el contenido sea tan alto como la propia ventana y que solamente exista un desplazamiento vertical en la región que nos interesa.
Para conseguir que el contenido se ajuste siempre al 100% y no se agrande la página es vital usar el atributo "overflow". Aquí existen dos alternativas:
- Overflow: auto, que provocará que se muestren barras de desplazamiento donde se necesiten.
- Overflow: hidden, que provocará que se oculte el contenido que no quepa, en vez de aparecer las barras de desplazamiento.
Overflow: hidden puede parecer un poco más crítico con el diseño, porque según sea el caso puede que haya contenido que simplemente no se vea. Pero funcionará mejor porque no aparecerán barras de desplazamiento donde no las quieres.
Prueba a intercambiar esos valores de los atributos para ver qué se ajusta mejor a tus necesidades. En nuestro caso, el único lugar donde era necesario este valor "auto" es en el elemento de clase ".messages".
Maquetar en filas con CSS Grid Layout
La maquetación con CSS Grid Layout es muy práctica también, de hecho incluso más adecuada que con el uso de Flexbox.
Aquí tenemos que conocer bien cómo se distribuye el espacio en las filas, lo que conseguimos con el atributo grid-template-rows. Puedes entender ese atributo con el artículo Ajustar filas y columnas de la rejilla.
También es importante saber que podemos conseguir un comportamiento parecido a flex-grow con las unidades fr de CSS Grid Layout.
El CSS usado en este ejemplo es el siguiente:
* {
box-sizing: border-box;
}
html {
height: 100%;
max-height: 100%;
line-height: 1.7rem;
}
body {
padding: 0;
margin: 0;
height: 100%;
max-height: 100%;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr;
justify-items: stretch;
align-items: stretch;
}
header {
background-color: #eee;
padding: 0.5rem;
}
.main {
padding: 0.3rem;
background-color: #f88;
max-height: 100%;
height: 100%;
border: 1px solid red;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr;
justify-items: stretch;
align-items: stretch;
overflow: auto;
}
h1 {
margin: 0;
}
.video {
background-color: #303030;
color: #fff;
padding: 1rem;
}
section {
border: 3px solid green;
background-color: #9ef;
max-height: 100%;
height: 100%;
padding: 0.5rem 1rem;
display: grid;
grid-template-columns: auto;
grid-template-rows: 1fr auto;
justify-items: stretch;
align-items: stretch;
overflow: auto;
}
.messages {
max-height: 100%;
height: 100%;
background-color: #ffc;
overflow: scroll;
}
Para acabar te dejo aquí el código completo de estos ejemplos, para que lo puedas descargar y ejecutar y comprobar por ti mismo el resultado.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...