There are several ways. All of them are somewhat similar. The first option is the most relevant.
<html> <body> <div class="content"></div> <footer></footer> </body> </html>
body, html { height: 100%; } body{ display: flex; flex-direction: column; justify-content: space-between; }
A footer height must be fixed
<html> <body> <div class="content"> <main class="main"></main> </div> <footer class="footer"></footer> </body> </html>
html,body{ height: 100%; } .content{ min-height: 100%; } .main{ padding-bottom: 200px; } .footer{ height: 200px; margin-top: -200px; }
<html> <body> <div class="content"></div> <footer class="footer"></footer> </body> </html>
html,body{ height: 100%; } .content{ box-sizing: border-box; min-height: 100%; padding-bottom: 200px; } .footer{ height: 200px; margin-top: -200px; }