<header>
<h1>Hello World</h1>
</header>
<main>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
</main>
<footer>
<p>© ACME</p>
</footer>
// Options: flexbox | grid
$method: flexbox;
$color: rebeccapurple;
* {
box-sizing: border-box;
}
body {
font-family: "Baloo 2", sans-serif;
min-height: 100vh;
@if ($method == "flexbox") {
// Flexbox method
display: flex;
flex-direction: column;
} @else {
// Grid method
display: grid;
grid-template-rows: auto 1fr auto;
}
}
@if ($method == "flexbox") {
footer {
margin-top: auto;
}
}
header,
footer {
display: grid;
place-items: center;
background-color: $color;
color: #fff;
}
main {
padding: 1rem;
max-width: 80ch;
margin: 0 auto;
outline: 2px dashed grey;
}
h1 {
font-size: 4rem;
}
p {
font-size: 1.125rem;
line-height: 1.5;
}
View Compiled
// Learn more:
// @link https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.