html - end - Flexbox Holy Grail Layout: Encabezado fijo, barra de navegación izquierda fija, área de contenido fluido, barra lateral derecha fija
flexbox guia (1)
Estoy intentando construir el diseño del "Santo Grial" usando Flexbox.
- Encabezado fijo
- Izquierda fija, plegable, desplazable
- Área de contenido flexible
- Fijo, plegable, desplazamiento a la derecha de la navegación
Vea abajo:
Tengo todo funcionando, excepto la altura del área de "aplicación" debajo del encabezado. En este momento es de 100vh (100% de la altura de la ventana gráfica), pero esto incluye el encabezado de 64px.
Intenté calc (100vh - 64px), pero eso no encaja bien con la flexión.
Aquí está mi estructura básica de HTML:
<main>
<header></header>
<app>
<nav>Left Nav</nav>
<article>Content</article>
<aside>Right Nav</aside>
</app>
</main>
Y el soporte CSS:
main {
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 0 64px;
display: flex;
}
app {
flex: 1 1 100vh;
display: flex;
}
nav {
flex: 0 0 256px;
order: 0;
}
article {
flex: 1 1 100px;
order: 1;
}
aside {
flex: 0 0 256px;
order: 2;
}
¡Lo averigué!
Resulta que hubo algunos conflictos de CSS con <main> y <body> , y todo lo que tuve que hacer fue eliminar el contenedor <main> , luego agregar las definiciones de flexión directamente al cuerpo de la página.
- - - Aquí está el jdFiddle en pleno funcionamiento - - -
- - - Aquí está el jdFiddle simplificado - - -
Nueva estructura HTML:
<body>
<header></header>
<app>
<nav>Left Nav</nav>
<article></article>
<aside>Right Nav</aside>
</app>
</body>
Nuevo CSS de apoyo:
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 64px;
display: flex;
}
app {
flex: 1;
display: flex;
}
nav {
flex: 0 0 256px;
order: 0;
}
article {
flex: 1;
order: 1;
overflow: auto;
}
aside {
flex: 0 0 256px;
order: 2;
}
¡Siéntase libre de usar esto como base para sus aplicaciones! ¡Disfrutar!