Search code examples
csstwitter-bootstrapfooterresponsivesticky-footer

Bootstrap Responsive sticky footer

I've been going in circles for 1 day on a simple footer which stays at the bottom of the page, unfixed.

I've managed to have it at the bottom of a full screen page. However, when I decrease the width of my browser's window to simulate a "responsive display", the footer stays at the same place when I scroll down the page and thus does not flush down.

Here is my html :

<html>
<body>

<div class="container">

<div class="row text-center">

<p> Blablabla </p>

</div> <!-- row -->

</div> <!-- container -->

    <div class="footer text-center">
            <p class="small">Alright !</p>
    </div>

</body>
</html>

And my CSS :

html {
 height: 100%; 
}

body {
  height: 100%; 
  padding-bottom: 30px;           
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
}

I've tried Bootstrap's column on the footer like this :

<div class="col-md-12 col-xs-12">

    <div class="footer text-center">
            <p class="small">&#169; 2017 Le Point G</p>
        </div>

</div>

But this method does not seem to be appropriate as it makes it inconsistent on my different pages as the amount of content differs from one page to another, pushing the footer more or less down.

Any better suggestions ?

Solution

  • you can have position:absolute just add

    min-height:100%;position:relative;

    to your container or row.

    .row {
min-height:100%;
   position:relative;
}
 html {
 height: 100%; 
}

body {

 
  padding-bottom: 30px;           
}

.footer {
position:absolute;
  background-color: blue;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
}
    <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      
       <style type="text/css">
      

       </style>
       <script type="text/javascript">
        
       </script>
       </head>
       <body>
       
     

<div class="container">

<div class="row text-center" >

<p> Blablabla </p>

</div> <!-- row -->

</div> <!-- container -->

    <div class="footer text-center">
            <p class="small">Alright !</p>
    </div>


</body>
</html>

    Explanation

    The container div has a min-height:100% -- this will ensure it stays the full height of the screen even if there is hardly any content. The container div is set to position:relative; this allows us to absolutely position elements inside it. The footer has a set height in px. The footer is absolutely positioned with bottom:0 and this moves it to the bottom of the container div. When there is little content on the page the container div is exactly the height of the browser view-port as it is set to min-height:100% and the footer sits at the bottom of the screen. When there is more than a page of content the container div becomes larger and extends down below the bottom of the view-port - the footer is still positioned at the bottom of the container div. The footer is also set to width:100%; so it covers the whole page.