When a footer is placed at the end of the body, we usually tend to have an issue with it when there isn’t much content in the body. This leaves room for alot of whitepace below the footer. The quickest way to resolve this issue is through the use of flexbox, which is an advanced CSS3 tool for building adaptive layouts.
Let’s create a simple layout:
To enable flex mode we add
display:flex to the body and the flex direction as columns for horizontal layout.
Now, the next step is to adjust how much space each section/part will take. This is done through flex properties:
The “flex-grow” property defines how much of the available free space in the container goes to an element. Then “flex-shrink” property decides on how much an element will shrink when there isn’t enough space for everything. Finally, the “flex-basis” property sets the default size of an element.
I believe that is quite straight forward way of implementing sticky footer using CSS3.