Flexbox Holy Grail Layout
Layout Holy Grail implementado con Flexbox moderno. Header sticky, footer al fondo y contenido fluido.
<div class="app">
<header class="header">Header</header>
<div class="main-wrapper">
<aside class="sidebar">Sidebar</aside>
<main class="content">Main content</main>
</div>
<footer class="footer">Footer</footer>
</div>
<style>
.app { display: flex; flex-direction: column; min-height: 100vh; }
.main-wrapper { display: flex; flex: 1; }
.sidebar { width: 240px; }
.content { flex: 1; }
@media (max-width: 768px) { .main-wrapper { flex-direction: column; } }
</style>