Hi I'm trying to make simple page with sticky footer. Footer stick to the bottom but when there is a lot of content it goes behind sticky footer. Why?
html, body{
height: 100%;
min-height: 100%;
}
#wrapper{
height: 100%;
min-height: 100%;
margin-bottom: -50px;
}
#footer{
height: 50px;
background-color: blue;
}
<html>
<body>
<div id="wrapper">
</div>
<div id="footer"></div>
</body>
</html>
Don't use position:absolute to create sticky footer. I recommend you to use flexbox. Please check my fiddle
Code Snippet:
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
main {
flex: 1 0 auto;
}
.footer {
background: crimson;
}
<main>
<h2>Your Content goes here...</h2>
</main>
<footer class="footer">
This is sticky footer
</footer>
Use fixed or absolute positioning along with width
html,
body {
height: 100%;
min-height: 100%;
}
#wrapper {
height: 100%;
min-height: 100%;
margin-bottom: -50px;
}
#footer {
position: fixed;
width: 100%;
bottom: 0;
height: 50px;
background-color: blue;
}
<html>
<body>
<div id="wrapper">
</div>
<div id="footer"></div>
</body>
</html>
What you have in your code is a static footer not sticky to make sticky do this.
#footer {
position: fixed;
bottom: 0;
z-index: 999;
}
Related
I have the following structure:
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
I dynamically load content in the <article> using javascript. Because of this, the height of the <article> block can change.
I want the <footer> block to be at the bottom of the page when there is a lot of content, or at the bottom of the browser window when only a few lines of content exist.
At the moment I can do one or the other... but not both.
So does anyone know how I can do this - get the <footer> to stick to the bottom of the page/content or the bottom of the screen, depending on which is lower.
Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.
Flexbox Version
If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.
The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0:
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
If you can't use flexbox, my base structure of choice is:
<div class="page">
<div class="page__inner">
<header class="header">
<div class="header__inner">
</div>
</header>
<nav class="nav">
<div class="nav__inner">
</div>
</nav>
<main class="wrapper">
<div class="wrapper__inner">
<div class="content">
<div class="content__inner">
</div>
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__inner">
</div>
</footer>
</div>
</div>
Which isn't all that far off from:
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
The trick to getting the footer to stick is to have the footer anchored to the bottom padding of its containing element. This requires that the height of the footer is static, but I've found that footers are typically of static height.
HTML:
<div id="main-wrapper">
...
<footer>
</footer>
</div>
CSS:
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
With the footer anchored to #main-wrapper, you now need #main-wrapper to be at least the height of the page, unless its children are longer. This is done by making #main-wrapper have a min-height of 100%. You also have to remember that its parents, html and body need to be as tall as the page as well.
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Of course, you should be questioning my judgement, as this code is forcing the footer fall off the bottom of the page, even when there's no content. The last trick is to change the box model used by the #main-wrapper so that the min-height of 100% includes the 100px padding.
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
And there you have it, a sticky footer with your original HTML structure. Just make sure that the footer's height is equal to #main-wrapper's padding-bottom, and you should be set.
* The reason I find fault with Fait's structure is because it sets the .footer and .header elements on different hierarchical levels while adding an unnecessary .push element.
Ryan Fait's sticky footer is a simple solution that I have used several times in the past.
Basic HTML:
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class="content"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Translating this to be similar to what you already have results with something along these lines:
HTML:
<body>
<div class="wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<div class="push"></div>
</div>
<footer>
</footer>
</body>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Just dont forget to update the negative on the wrapper margin to match the height of your footer and push div. Good luck!
I was looking to solve this problem without adding any additional markup, so I ended up using the following solution:
article {
min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}
footer {
height: 50px;
}
header {
height: 50px;
}
nav {
height: 50px;
}
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
You have to know the heights of header, nav and footer to be able to set the min-height for the article. By this, if article has only few lines of content, the footer will stick to the bottom of the browser window, otherwise it will go below all the content.
You can find this and other solutions posted above here: https://css-tricks.com/couple-takes-sticky-footer/
I will like to approach this with css-grid. I will make two-part in your #main-wrapper div. The first one is for content and the second one is for footer.
// HTML
<body>
<div id="main-wrapper">
<div class="main-content">
<header></header>
<nav></nav>
<article></article>
</div>
<footer class="footer">
footer
</footer>
</div>
</body>
In css
#main-wrapper {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
background-color: #a45657;
color: white;
text-align: center;
padding: 10px;
font-size: 20px;
}
You can check the working demo here (Please check-in project view).
This code is taken from my favorite CSS site css-tricks.
2023 - Here's the css only solution. Make 90vh whatever works for your footer.
<div style= "min-height:90vh">
... your content
</div>
<div>
... your footer
</div>
I have the following structure:
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
I dynamically load content in the <article> using javascript. Because of this, the height of the <article> block can change.
I want the <footer> block to be at the bottom of the page when there is a lot of content, or at the bottom of the browser window when only a few lines of content exist.
At the moment I can do one or the other... but not both.
So does anyone know how I can do this - get the <footer> to stick to the bottom of the page/content or the bottom of the screen, depending on which is lower.
Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.
Flexbox Version
If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.
The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0:
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
If you can't use flexbox, my base structure of choice is:
<div class="page">
<div class="page__inner">
<header class="header">
<div class="header__inner">
</div>
</header>
<nav class="nav">
<div class="nav__inner">
</div>
</nav>
<main class="wrapper">
<div class="wrapper__inner">
<div class="content">
<div class="content__inner">
</div>
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__inner">
</div>
</footer>
</div>
</div>
Which isn't all that far off from:
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
The trick to getting the footer to stick is to have the footer anchored to the bottom padding of its containing element. This requires that the height of the footer is static, but I've found that footers are typically of static height.
HTML:
<div id="main-wrapper">
...
<footer>
</footer>
</div>
CSS:
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
With the footer anchored to #main-wrapper, you now need #main-wrapper to be at least the height of the page, unless its children are longer. This is done by making #main-wrapper have a min-height of 100%. You also have to remember that its parents, html and body need to be as tall as the page as well.
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Of course, you should be questioning my judgement, as this code is forcing the footer fall off the bottom of the page, even when there's no content. The last trick is to change the box model used by the #main-wrapper so that the min-height of 100% includes the 100px padding.
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
And there you have it, a sticky footer with your original HTML structure. Just make sure that the footer's height is equal to #main-wrapper's padding-bottom, and you should be set.
* The reason I find fault with Fait's structure is because it sets the .footer and .header elements on different hierarchical levels while adding an unnecessary .push element.
Ryan Fait's sticky footer is a simple solution that I have used several times in the past.
Basic HTML:
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class="content"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Translating this to be similar to what you already have results with something along these lines:
HTML:
<body>
<div class="wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<div class="push"></div>
</div>
<footer>
</footer>
</body>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Just dont forget to update the negative on the wrapper margin to match the height of your footer and push div. Good luck!
I was looking to solve this problem without adding any additional markup, so I ended up using the following solution:
article {
min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}
footer {
height: 50px;
}
header {
height: 50px;
}
nav {
height: 50px;
}
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
You have to know the heights of header, nav and footer to be able to set the min-height for the article. By this, if article has only few lines of content, the footer will stick to the bottom of the browser window, otherwise it will go below all the content.
You can find this and other solutions posted above here: https://css-tricks.com/couple-takes-sticky-footer/
I will like to approach this with css-grid. I will make two-part in your #main-wrapper div. The first one is for content and the second one is for footer.
// HTML
<body>
<div id="main-wrapper">
<div class="main-content">
<header></header>
<nav></nav>
<article></article>
</div>
<footer class="footer">
footer
</footer>
</div>
</body>
In css
#main-wrapper {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
background-color: #a45657;
color: white;
text-align: center;
padding: 10px;
font-size: 20px;
}
You can check the working demo here (Please check-in project view).
This code is taken from my favorite CSS site css-tricks.
2023 - Here's the css only solution. Make 90vh whatever works for your footer.
<div style= "min-height:90vh">
... your content
</div>
<div>
... your footer
</div>
I am trying to have a header/footer and a scrollable div#middle. Within the scrollable div, another (inner) footer div#middle-bottom should be placed at the bottom of div#used-for-swipe-animation and always be visible.
This is my current code using flex-container (using flex is not a requirement):
html, body {
margin: 0
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow-y: auto;
}
.top {
background: lightgreen;
}
.middle {
flex-grow: 1;
overflow: auto;
}
.middle-bottom {
background: red;
}
.bottom {
background: lightblue;
}
<body>
<div class="wrapper">
<div class="top">top</div>
<div id="used-for-swipe-animation">
<div class="middle">
middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle
</div>
<div class="middle-bottom">
middle-bottom<br>middle-bottom<br>middle-bottom<br>middle-bottom<br>
</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
Problem: Without the div#used-for-swipe-animation it works as expected. However, as the id suggests, div#used-for-swipe-animation is needed to perform some animation.
Nice-to-Have: Is it possible to have the scrollbar of div#middle to be displayed over full height of div#wrapper?
As per I understand your Que, you need fixed Header & Footer and scroll div in middle
html,
body {
margin: 0
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow-y: auto;
}
.top {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background: lightgreen;
}
.main_center {
margin: 30px 0;
}
.middle {
flex-grow: 1;
overflow: auto;
}
.middle-bottom {
background: red;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
background: lightblue;
}
<body>
<div class="wrapper">
<div class="top">top</div>
<div id="used-for-swipe-animation" class="main_center">
<div class="middle">
middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle
</div>
<div class="middle-bottom">
middle-bottom<br>middle-bottom<br>middle-bottom<br>middle-bottom<br>
</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
Replay can lead perfection :)
Not-so-experienced developer here
I am currently working on a web page with a "Header - Content - Footer" design.
<html>
<body>
<div id="root">
<div class="header">
HEADER
</div>
<div class="content">
CONTENT
</div>
<div class="footer">
FOOTER
</div>
</div>
</body>
</html>
Header is a sticky div. Something like a navbar.
Content can be of ANY size.
Header and footer have fixed height.
I want the content div to take the remaining page space even when the content inside is not big enough to fill the div.
Here is the css that I came up with:
html, body, #root {
min-height: 100vh;
}
body {
margin: 0
}
.content {
background-color: red;
height: 100%;
}
.header {
position: sticky;
top: 0;
}
.header, .footer {
height: 56px;
width: 100%;
line-height: 56px;
background-color: green;
}
Although this works as intended when the content is larger than the viewport, it doesn't on the opposite case.
When looking through a developer console, the height values of the html, body, #root tags rightfully equals 100% of the viewport, but the content div does not take the remaining space (even when specifying height: 100%).
Why is that so?
Here is a jsfiddle: https://jsfiddle.net/c91p0yot/
Use the flexbox layout mode and make your <body> display: flex;
Then, give the .content a flex value of 1 which will force the .content to take up all remaining space.
Also get rid of the #root div
html
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-flow: column nowrap;
}
.content {
background-color: red;
flex: 1;
}
.header {
position: sticky;
top: 0;
}
.header, .footer {
height: 56px;
width: 100%;
line-height: 56px;
background-color: #f8f9fa;
}
Set the content to be at least the height of the viewport minus the header and footer height.
html, body, #root {
min-height: 100vh;
}
body {
margin: 0
}
.content {
background-color: red;
min-height: calc(100vh - 112px);
}
.header {
position: sticky;
top: 0;
}
.header, .footer {
height: 56px;
width: 100%;
line-height: 56px;
background-color: #f8f9fa;
}
<body>
<div id="root">
<div class="header">
HEADER
</div>
<div class="content">
CONTENT
</div>
<div class="footer">
FOOTER
</div>
</div>
</body>
My goal was to get the footer to stay at the bottom of the page and to go further down when more content is added. In doing so, a div element on my page which follows the footer has stopped half way when there isn't enough content.
My question is, how do you get the middle-stripdiv to stretch to the footer and have the goal above still achievable.
Here is a simplified JSFiddle to show the issue.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #283343;
height: 50px;
}
#middle-strip {
padding-bottom: 100px;
background: #32cd32;
width: 500px;
margin: auto;
}
#content-area {
width: 400px;
height: 100%;
margin: auto;
}
#footer {
background: #283343;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
<div id="container">
<div id="header">
THIS IS THE HEADER
</div>
<div id="middle-strip">
<div id="content-area">
THIS IS WHERE THE CONTENT WILL GO
</div>
</div>
<div id="footer">
THIS IS THE FOOTER
</div>
</div>
You can use flexbox to achieve this:
#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#middle-strip {
flex: 1;
}
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/