Bootstrap 3 Sticky Footer by Martin Bean and Ryan Fait
You can view introduction page here.
Generally A sticky footer is created just like the fixed-nav
bar in Bootstrap3. This footer will always stay at the bottom of page, even though there isn't enough content.
Martin Bean and Ryan Fait also have a Sticky Footer with Fixed Nav Bar page here.
Following is part of basic code for Sticky Nav bar with my analysis (You need Bootstrap3 css library):
In HTML, You have two big divs:
#wrap
and#footer
.#footer
contains everything you want to put in footer.
#wrap
has two small divs:.container
and#push
. You put all main content in.container
and nothing inpush
<body> <!-- Part 1: Wrap all page content here --> <div id="wrap"> <!-- Begin page content --> <div class="container"> <!-- Content --> </div> <div id="push"></div> </div> <!-- Park 2: Footer --> <div id="footer"> <!-- Footer --> </div> </body>
#wrap
takes full height of page. You set this by usingmin-height
. Setheight
toauto
to make sure small amount of content will not shrink#wrap
.#wrap
has a bottom margin-60px
. This number can be changed, but it must be the same height as#push
and#footer
. This negative margin can allow#footer
always stick to bottom of#wrap
.
#push
is used as a placeholder for#footer
.#footer
has same height as#push
, so it covers#push
because of the negative margin in#wrap
. Items above#push
will stay in distance from#footer
, because since they have bottom margin to#push
, they now have bottom margin to#footer
.
/* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto !important; /* Negative indent footer by it's height */ margin: 0 auto -60px; /**In th } /* Set the fixed height of the footer here */ #push, #footer { height: 60px; }