I'm starting the design of a page using grid-layout. And I face two problems. The first is that I do not know how to make the footer stick to the end of the page. I only achieve it when the div that handles the content is full of information. If it is empty (as in the example I attached below) the foot is halfway to the page.
Also I have a small problem that I have decided to put it with this question, which is that in the header, the content inside that will be a future navigation bar appears in between.
.header, .footer, .main {
padding: 1.2em;
}
.header {
background-color: blue; /*#f5f5f5*/
}
.footer {
background-color: red; /*#f5f5f5*/
}
.main {
background-color: #BBDEFB;
}
body {
margin: 0 auto;
}
.container {
display: grid;
/* Grid de 3x5 */
/* 3 columnas: 1a de 200px, 2a como margen (1%), 3a ocupa el espacio restante */
grid-template-columns: 200px 1% 1fr;
/* 5 filas: grid-rows: 1a, 3a y 5a ancho automático, 2a y 4a como margen de 15px */
grid-template-rows: auto 15px auto 15px auto;
}
.header,
.footer {
grid-column-start: 1;
grid-column-end: 4;
}
.header {
grid-row: 1;
height: 10%;
}
.footer {
grid-row: 5;
position: relative;
bottom: 0;
width: 100%;
height: 50px;
}
.main {
grid-column-start: 1;
grid-column-end: 4;
grid-row: 3;
}
@media (max-width: 400px) {
.container {
display: block;
}
} <div class="container">
<header class="header">
<p>cabecera</p>
</header>
<div class="main">
<p>contenido</p>
</div>
<footer class="footer">
<p>pie</p>
</footer>
</div>