Nihvel Nihvel - 1 month ago 10
CSS Question

Footer does not display properly and hides content at the bottom of the page

I can't even count how many questions I found about this footer.
So, please, forgive me for this one, as I tried every single answer and yet not able to fix my problem.

Take a webpage with bootstrap's rows and columns.
At the very bottom of it, just before the closing div for the container-fluid, I pasted this code which I later modified to add a second dropdown menu.

<!-- Fixed navbar -->
<div class="footer navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" onClick="history.go(-1)">&#171; MyPage</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" data-theme="default_theme" class="theme-link">Just black</a></li>
<li><a href="#" data-theme="cerulean" class="theme-link">Cerulean</a></li>
<li><a href="#" data-theme="cyborg" class="theme-link">Cyborg</a></li>
<li><a href="#" data-theme="journal" class="theme-link">Journal</a></li>
<li><a href="#" data-theme="readable" class="theme-link">Readable</a></li>
<li><a href="#" data-theme="simplex" class="theme-link">Simplex</a></li>
<li><a href="#" data-theme="spacelab" class="theme-link">Spacelab</a></li>
<li><a href="#" data-theme="united" class="theme-link">United</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Xml Themes <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" xml-data-theme="default_xml" class="theme-xml-link">Simple white</a></li>
<li><a href="#" xml-data-theme="dark" class="theme-xml-link">Dark</a></li>
<li><a href="#" xml-data-theme="okaida" class="theme-xml-link">Okaida</a></li>
<li><a href="#" xml-data-theme="coy" class="theme-xml-link">Coy</a></li>
<li><a href="#" xml-data-theme="funky" class="theme-xml-link">Funky</a></li>
<li><a href="#" xml-data-theme="solarized-light" class="theme-xml-link">Solarized Light</a></li>
<li><a href="#" xml-data-theme="twilight" class="theme-xml-link">Twilight</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>

</div><!-- closing the container -->

</body>
</html>


The code, as it is, works and let me have this navbar placed at the bottom of the page.
I tried replacing
<div class="navbar navbar-inverse navbar-fixed-bottom">
with
<footer class="navbar navbar-inverse navbar-fixed-bottom">
or even
<div class="footer navbar-inverse navbar-fixed-bottom">

And also giving it fixed height on the css.
It just seems that nothing changes.

The last part of my page, gets concealed by this navbar. I can't get to have it "sticky".

Any answer about this issue? I think I read all the questions related to this topic already, but..

EDIT: Added jsfiddle
https://jsfiddle.net/u2hw5pt2/1/

Answer

The sticky footer works by setting it's position to fixed, which takes it out of the document flow, meaning that for the browser it will not come "after" the content, it will just end up being over it. To avoid this you could just add some padding to the bottom of the body, in order to push the footer a little bit further down:

https://jsfiddle.net/u2hw5pt2/2/

body {
    padding-bottom: 100px;
}
Comments