CSS sticky footer layout allows you to maintain our footer at the bottom of the page even if there is not enough content to push it down. If the content exceeds the height of the page, our footer will move to the end of the scroll.
At this point our enterprise application should look like the following screenshot:
We would like our footer to stick to the bottom of the page. To achieve this, there are several implementations. We are going to follow one of the most common implementations that consists of two containers and a .push element that reserves the space for our footer:
To begin, we will add some tags to our current structure: a section tag with the class wrapper to separate all our tags from the footer, a div tag with the class main to contain page tags at the same level, and finally a div tag with the class push, to create space inside the wrapper section, allowing footer to be over the wrapper class:
<body class="no-js"> <section class="wrapper"> <...