Some time ago, I encountered the need for sticky footers in my work. I used JS control before, and finally found that flex layout is a good helper to solve this kind of problem.
Sticky Footer: Pin the footer to the bottom of the window even if there is not enough content to fill the page.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .box { display: flex; min-height: 100vh; flex-direction: column; } .main { flex: 1; } </style> </head> <body> <div class="box"> <header>header</header> <div class="main">main</div> <footer>footer</footer> </div> </body> </html>
This is a simple example. It can be extended to other layouts, such as: side layout and so on.
Reference: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/