HTML
<html>
<body>
<div id="flex-wrap">
<header>Header Content</header>
<content>
<p>Body content remains at the top of the page.</p>
<p>When the content doesn't fill the page, the footer will be placed at the bottom of the page.</p>
<p>If the conte fills the vertical height of the page, the footer will shift down with the content.</p>
</content>
</div>
<footer>
The footer is placed at the bottom of the page.
</footer>
</body>
</html>
CSS
html {
text-align: center;
font-size: 22px;
}
body {
display: flex;
display: -webkit-flex;
display: -ms-flex;
height: 100vh;
flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
}
#flex-wrap {
flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex: 1 0 auto;
}
/* Demo styling */
header, footer {
display: block;
background-color: orange;
padding: 20px;
}
content {
border: 1px solid red;
display: block;
text-align: center;
height: 200px;
}
footer {
background-color: green;
}
