In Susper, we have a navigation bar as a footer, as shown:
Previously this footer-navbar would appear immediately after the content, even if it was in the middle of the page. This is how the footer would appear:
Since this could be a very common problem on a lot of websites, this blog deals with a simple hack for it.
- Design your footer navbar as you please. You need not use any predefined bootstrap classes. You also need not specify any parameters regarding the position of the navbar (relative, absolute etc.).
- Enclose the rest of the data on your webpage in a div tag, do not forget to mention a class name or id name for the tag.
- Now comes the simplest trick: Set a minimum height for your div! It is advisable to use vh (viewport-height) as your unit of measurement since it is easy to estimate how much of the viewport needs to be covered by your width.
This is how it is used in Susper:
Remember that each vh corresponds to one-hundredth of the viewport total height. So 100 vh here will mean a minimum height of the full viewport.
You can check the Susper repository for the source code or go through this link for alternate ways to create a sticky footer at the bottom.