💻 Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="author" content="Antonio Berrocal Piris">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/holy_grail_layout.css">
<title>Holy Grail Layout</title>
</head>
<body>
<div class="contenedor">
<header>
<h1>Encabezado</h1>
</header>
<div class="flex">
<nav>
<p>Menú</p>
</nav>
<main>
<p>Contenido principal</p>
</main>
<aside>
<p>Publicidad, ..</p>
</aside>
</div>
<footer>
<address>Final de la página: contacto, legal, ...</address>
</footer>
</div>
</body>
</html>
🎨 Código CSS
header,
footer {
min-height: 10vh;
background-color: green;
}
nav,
aside {
flex-basis: 10vw;
min-width: 100px;
background-color: lightsalmon;
flex-grow: 1;
}
main {
flex-basis: 80vw;
background-color: pink;
flex-grow: 1;
}
div.flex {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
body,
h1 {
margin: 0;
}
div.contenedor {
display: flex;
flex-direction: column;
height: 100vh;
}
