Snarp/sticky_footer_example_flexbox.html

## sticky_footer_example_flexbox.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Minimal Sticky Footer Example - Vertical Flexbox</title>
  <style>
    html {
      height: 100% !important;
    }

    body {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      margin: 0; padding: 0;
    }

    .footer {
      margin-top: auto !important;
      background: lightgray; text-align: center;
    }

    .main {
      flex-shrink: 0 !important;
      padding: 1rem;
    }
  </style>
</head>
<body>

<section class="main">

  <h1>Minimal Sticky Footer Example - Vertical Flexbox</h1>

  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

</section>

<footer class="footer">

  <p>This is the footer.</p>

</footer>

</body>
</html>

## sticky_footer_navbar_vertically_centered_example.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Minimal Sticky Footer & Navbar & Vertically-Centered Main Content Example - Vertical & Horizontal Flexbox</title>
  <style>
    html {
      height: 100% !important;
    }

    body {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between; /* <- vertically-centers main content */
      margin: 0; padding: 0;
    }

    .navbar {
      display: flex;
      background: lightgray;
    }
    .navbar div { padding: 1rem; }
    .navbar div:hover { background: darkgray; }

    .main {
      flex-shrink: 0 !important;
      padding: 1rem;
    }

    .footer {
      background: lightgray; text-align: center;
    }
  </style>
</head>
<body>

<nav class="navbar">

  <div>Item</div>
  <div>Item</div>
  <div>Item</div>

</nav>

<section class="main">

  <h1>Minimal Sticky Footer & Navbar & Vertically-Centered Main Content Example - Vertical & Horizontal Flexbox</h1>

  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

</section>

<footer class="footer">

  <p>This is the footer.</p>

</footer>

</body>
</html>

## sticky_footer_w_navbar_example_flexbox.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Minimal Sticky Footer & Navbar Example - Vertical & Horizontal Flexbox</title>
  <style>
    html {
      height: 100% !important;
    }

    body {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      margin: 0; padding: 0;
    }

    .navbar {
      display: flex;
      background: lightgray;
    }
    .navbar div { padding: 1rem; }
    .navbar div:hover { background: darkgray; }

    .main {
      flex-shrink: 0 !important;
      padding: 1rem;
    }

    .footer {
      margin-top: auto !important;
      background: lightgray; text-align: center;
    }
  </style>
</head>
<body>

<nav class="navbar">

  <div>Item</div>
  <div>Item</div>
  <div>Item</div>

</nav>

<section class="main">

  <h1>Minimal Sticky Footer & Navbar Example - Vertical & Horizontal Flexbox</h1>

  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

</section>

<footer class="footer">

  <p>This is the footer.</p>

</footer>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Minimal Sticky Footer Example - Vertical Flexbox</title>
	<style>
	html {
	height: 100% !important;
	}

	body {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	margin: 0; padding: 0;
	}

	.footer {
	margin-top: auto !important;
	background: lightgray; text-align: center;
	}

	.main {
	flex-shrink: 0 !important;
	padding: 1rem;
	}
	</style>
	</head>
	<body>

	<section class="main">

	<h1>Minimal Sticky Footer Example - Vertical Flexbox</h1>

	<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

	</section>

	<footer class="footer">

	<p>This is the footer.</p>

	</footer>

	</body>
	</html>