How can I have a sticky footer with my CSS Grid layout?
I found this CodePen solution for a sticky footer in a CSS Grid layout, but it has two problems for me:
- It is kinda ugly with
min-height: 100%andheight: 100% - It only works with two elements in the body (a div and a footer)
I need something that works with this HTML structure:
<body>
<nav>Some navigation buttons</nav>
<main>The content</main>
<footer>Copyrights and stuff</footer>
</body>
I don't really want to pack the <nav> and the <main> into a <div>, and I would love to do this in pure CSS.
Answer
Here is a CSS Grid solution, but it's far better using a class for the target.
Using grid-areas this will be very straightforward:
html,body{
height: 100%;
}
body{
margin: 0;
}
body {
display: grid;
grid-gap: 10px;
height: 100%;
grid-template-columns:1fr;
grid-template-areas:
"nav"
"main"
"footer";
grid-template-rows: 100px 1fr 80px;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
nav {
background-color: #7E57C2;
}
main {
background-color: #F8BBD0;
}
footer {
background-color: #7E57C2;
}