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

Time:2020-6-24

HTML code:
<body>

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

</body>

body {

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

}
.content {

flex: 1; 

}
.footer{

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: https://segmentfault.com/a/1190000015123189