<div class="site-container">
  <header class="site-header">My site</header>
  <main class="site-content">
    <h1>Please log in</h1>
    <button>Log in here</button>
  <footer class="site-footer"></footer>
.site-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

.site-content {
  flex: 1;

/* Just some styling for the case of this example */
.site-header {
  padding: 20px;
  background-color: orange;

.site-content {
  display: block;
  padding: 20px 0;
  margin: 0 auto;
  max-width: 800px;

.site-footer {
  background: linear-gradient(to bottom, purple, rebeccapurple);
  padding: 50px 0;

body {
  margin: 0;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.