Footer always at the bottom of the page with Css
It's problem for many developers. You have a page without much content on it. How to push footer down to the bottom of the viewport?
Like always we have few options:

1. Use Css only:
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}

#content {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
see jsbin

2. Use bootstrap stylesheets:
<body>
  <div class="content">
      content
  </div>
  <div class="footer navbar-fixed-bottom">footer</div>
</body>
see jsbin

3. Use bootstrap and display:table
<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col div1"> saddsa<br/> saddsa<br/>saddsa<br/>saddsa<br/> </div>
    <div class="col-lg-4 table-col div2"> ... </div>
    <div class="col-lg-4 table-col div3"> ... </div>
  </div>
</div>
.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

.div1{
  background-color:LightBlue;
}

.div2{
  background-color:Red;
}

.div3{
  background-color:Sienna;
}
see jsbin

Also you can achieve this by calculating height in javascript, but I'm not a fun for such solutions.

×
×