Hitesh Modha Hitesh Modha - 14 days ago 5
CSS Question

sticky bootstrap footer overlaping content of page

I am using bootstrap 3.0, i have sticky footer placed at bottom of my page.Footer is overlaping content of page in phone and tablet view.

footer code is written below:

html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}

#footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f1f1f1;
}

#push
{
height: 60px;
}

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}


basic page Skeleton :

<div id="wrap">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
.....
</div>
</div>


<div class="container">
......
</div>
</div> <!-- End -Wrap -->
<div id="push"></div>
<div id="footer">
<div class="container">
....
</div>
</div>


Please tell me what kind of changes i need to do i my code.

Answer

There is no need of using wrapper. The latest version of the sticky footer that can be found in the official examples are not using and it works nicely.

Here is the CSS

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

For the below HTML:

<body>
  <div class="container">
    ...
  </div>

  <div id="footer">
    <div class="container">
      <p class="text-muted">Place sticky footer content here.</p>
    </div>
  </div>
</body>