How to make a sticky footer in Bootstrap 3?

Question

Here is the current situation of my theme:

Fiddle. I don't want a fixed footer, and I don't want a sticky footer with position absolute , I just want to fill the horrible section with footer color , I think that display:table-row will do the trick, but don't know how to use it. Can anyone help me please?

Here is a very clean example: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ and here the support http://caniuse.com/#feat=flexbox — Michelangelo, Jul 26 '15 at 19:21
http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page — Rachel Gallen, Jul 26 '15 at 19:28

Stickers · Accepted Answer · 2015-07-26T20:49:03.423

Here is a simple structure of CSS table + table-row.

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
    margin: 0;
}
header, main, footer {
    display: table-row;
}
header {background: pink;}
footer {background: lightgreen;}

<header>header</header>
<main>main</main>
<footer>footer</footer>

And set height:100% to one of the section if you want it to get maximum height available.

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
    margin: 0;
}
header, main, footer {
    display: table-row;
}
main {
    height: 100%;
}
header {background: pink;}
footer {background: lightgreen;}

<header>header</header>
<main>main</main>
<footer>footer</footer>

that's the tricky way , thanks a lot – Sadeghbayan Jul 27 '15 at 04:33 — Sadeghbayan, Jul 27 '15 at 04:33

score 0 · Answer 2 · answered Jul 26 '15 at 19:34

0

Here's what you're looking for:

.footer{
    background-color:#000;
    color:#fff;
    position:absolute;
    bottom:0px;
    min-width:100%;
}

JSFiddle

answered Jul 26 '15 at 19:34

BahaEddine Ayadi

987
9
20

score 0 · Answer 3 · answered Jul 26 '15 at 19:42

The easiest solution I can think of would be to make a content container and give it a background color, then set the body color to the same as the footer like:

body {
    background:#0F0;
}
#header {
    background:#F00;
}
#container {
    background:#FFF;
}
#footer {
    background:#0F0;
}

Fiddle

score 0 · Answer 4 · answered Jul 26 '15 at 21:23

just add

  position:absolute;
  bottom:0px;

to .footer

and

position: relative;
  padding-bottom: (n)px;

to body

change (n) to the height of the footer

body {
  position: relative;
 margin:0;
  padding-bottom: 100px;

  font-family: "Helvetica Neue", Arial, sans-serif;
}

.footer{

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height:100px;
width:100%;
  background-color: #efefef;
  text-align: center;

}

<html><body><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>


<div class="footer">text</div>
</body></html>

How to make a sticky footer in Bootstrap 3?

4 Answers4