Classic layout of front end: sticky footer layout – Flex layout


HTML code:

<div class="content"></div>
<div class="footer"></div>


body {

display: flex; 
flex-flow: column; 
min-height: 100vh;

.content {

flex: 1; 


flex: 0;      

This method uses flex layout to segment the window height. The footer’s flex is set to 0, so that the footer gets its inherent height; the content’s flex is set to 1, so that it will be full of other parts to remove the footer.

Reference article: