CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
John Ayers
John Ayers

Reputation: 519

Bootstrap Sticky Footer

Whats the best way to get the footer im trying to make always stick to the bottom of the page no matter how much or how little text it on the page. I have tried several different ideas but with the new bootstrap it doesn't want to cooperate. I have tried fixed and it is not what I'm wanting.

Im wanting the bottom black footer bar to always align to the bottom of the page.

My CSS:

/* Chrome Frame Prompt
-------------------------------------------------- */
.chromeframe{ margin: .2em 0; background: #ECCC5B; color: #000000; margin-top: -55px; margin-bottom: 55px; padding: .2em 0; z-index: -100 ; text-align :center; }

/* Bootstrap Styles
-------------------------------------------------- */
.navbar-inverse { background-color: #3A3A3A; border-color: #3A3A3A; }
.navbar-inverse .navbar-brand { color: #BE1E2D; font-weight: bold; margin-top: 12px; padding-left: 40px; }
.navbar-inverse .navbar-toggle { margin-top: 20px; }
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF; height: 75px; padding-top: 28px; }
.navbar-inverse .navbar-nav>li>a:hover { color: #BE1E2D; }
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #BE1E2D; }
.dropdown-menu { background-color: #080808; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; }
.dropdown-menu>li>a { line-height: 1.6; color: #FFFFFF; }
.dropdown-menu>li>a:hover { line-height: 1.6; color: #BE1E2D; }

/* Main Styles
-------------------------------------------------- */
html, body { position: relative; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; font: normal 16px/1.5; color: #232525; padding-top: 50px; padding-bottom: 20px; }

.logo { float: left; }
.logo:hover { }

.main-container { padding-bottom: 100px; }
.main-row { padding-top: 15px; }

.footer { position: absolute; color: #999999; background-color: #000000; bottom: 0; width: 100%; height: 100px;  }
.logo-footer { float: left; margin-top: 13px; }
.footer-nav { color: #999999; display: block; float: left; margin: 40px 0 0 15px; }
.footer-copy { float: right; margin: 40px 0 0 0; text-align: left; }

/* RESPONSIVE CSS
--------------------------------------------------*/
@media (max-width:1150px) { 

}
@media (max-width:900px) { 

}
@media (max-width:767px) { 
    .navbar-inverse .navbar-nav>li>a { height: 40px; padding-top: 11px; }
    .footer-copy { float: none; text-align: center; }
}
@media (max-width:340px) { 

}

Upvotes: 0

Views: 1204

Answers (2)

Terning
Terning

Reputation: 144

I used this in my recent boostrap site. Hope it helps.

HTML

<div class="footer_wrapper">
    <div class="container">
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
    </div>
</div>

css

.footer_wrapper {
  min-height: 270px;
  background-color: #232323;
  color: #8f8f8f;
  bottom: 0;
  padding-top: 0px;
  width: 100%;
}

Upvotes: 0

Simon
Simon

Reputation: 2981

A solution is to ensure your content is always at least the height of the screen, this will cause the footer to be pushed to the bottom of the screen if the window is large enough.

Wrap your page content (excluding footer) in another <div> and in its style, set min-height to 100%

The downside of this is that the footer now hangs off the window constantly, to fix that, allow the footer to "sink" back up into the content by setting margin-bottom to negative the size of the footer (i.e if your footer is 50px, margin-bottom: -50px).

Another quirk you'll find after that is the footer may overlap the page content, to fix that, insert an element into the wrapper div from earlier and make its height that of the footer.

For example:

body, html {
    height: 100%;
    margin: 0;
}

.wrapper {
    min-height: 100%;
    margin-bottom: -50px;
}

.push {
    height: 50px;
}

.footer-pad {
    height: 50px;
}

<div class="wrapper">
    <div class="container>
        Some content
    </div>
    <div class="footer-pad"></div>
</div>
<div class="footer">Footer</div>

A couple of important things to note are the html, body must be set to 100% height, and the body must have no margin or you'll get a constant scrollbar

http://jsfiddle.net/XJDLk/

Upvotes: 3

Related Questions