I have been looking for a way to add a footer to a Twitter Bootstrap 3 project I am working on.
What I want is for the footer to stick to the bottom of the page when the content is too short to fill out the screen, but get pushed down by content when the content does fill the screen.
All solutions I have found & tried so far, has either not worked, had the footer ALWAYS shown, or had the footer below the page, so it was only visible upon scrolling.
Thanks in advance!
These days almost all browsers support viewport units. So used it to have sticky footer. It worked for me.
You can check viewport support here.
Adjust min-height for desired footer position when there is no content.
#main {
min-height: 70vh;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="header" class="bg-secondary">Header: Sticky footer example</div>
<div id="main" class="bg-light">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Less content</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">No content</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">More content</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">
<p>Content 1: Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
</div>
<div class="tab-pane container fade" id="menu1">
</div>
<div class="tab-pane container fade" id="menu2">
<p>Content 0</p>
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
<p>Content 5</p>
<p>Content 6</p>
</div>
</div>
</div>
<div id="footer" class="bg-secondary">
Footer
</div>