CSS - Web page footer always bottom
Force position of footer down at the bottom of the page no matter the height of the content section of the page. For small pages the footer sticks to the bottom of window. For large pages the footer is positioned below all the content and is only visible by scrolling.
<body>
<div class="footer-down-wrapper">
<main class="content">
{{main_content}}
</main>
<footer>
{{footer_content}}
</footer>
</div>
</body>html, body {
height: 100%;
margin: 0;
}
.footer-down-wrapper {
display: table;
height: 100%;
width: 100%;
}
.content {
display: table-row;
height: 100%;
}
footer {
display: table-row;
}