Sticky footer - Githubissues

hugovincent commented 12 years ago

It'd be good if Bootstrap supported sticky footers (floats to bottom of page for pages shorter than the browser window).

pkneale-ce commented 12 years ago

Agreed

dvanderbeek commented 12 years ago

You can make the footer sticky pretty easily using this method: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

pkneale-ce commented 12 years ago

Thanks - will take a look at this tonight.. ! :)

-----Original Message----- From: dvanderbeek [mailto:reply@reply.github.com] Sent: Wednesday, 28 September 2011 11:01 PM To: Peter Kneale Subject: Re: [bootstrap] Sticky footer (#306)

You can make the footer sticky pretty easily using this method: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Reply to this email directly or view it on GitHub: https://github.com/twitter/bootstrap/issues/306#issuecomment-2224629

mdo commented 12 years ago

Going to skip on this one—easy to add on with a limited about of CSS. If we get any more requests, we'll revisit.

mattruma commented 12 years ago

It would be nice if this was just part of the css ... maybe similar to container and container-fluid ... something like footer and footer-sticky.

JanDupal commented 12 years ago

+1

martinbean commented 12 years ago

Just add position: fixed; left: 0; right: 0; bottom: 0; to your "bottom-bar" and put some padding-bottom on your main container so your content doesn't get hidden underneath it.

I did it on a project recently (that's unfortunately not live yet, so can't demonstrate) and it really isn't too much trouble. Bootstrap is meant to be a starting point; you are allowed to add your own CSS on top!

EDIT: A more complete example, just to demonstrate how simple it is:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
    <style>
        .container[role="main"] {
            padding-bottom: 60px;
        }
        .bottombar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
  </head>
  <body>
    <div class="container" role="main">
      <!-- your content -->
    </div>
    <div class="bottom-bar">
      <div class="bottombar-inner">
        <div class="container">
          <ul class="nav">
            <li><a href="#">Link 1</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

JanDupal commented 12 years ago

@martinbean thanks :)

dvanderbeek commented 12 years ago

Wouldn't this method cause the footer to always be visible? The method I suggested pushes the footer to the bottom if there is a small amount of content on the page, but if there is a lot of content the footer gets pushed "below the fold" so to speak. That way it isn't floating on top if the page scrolls.

martinbean commented 12 years ago

Sorry, I thought the issue was you wanted a static bottom bar like there is a static top bar.

Even then, it isn't that much code to add to achieve a sticky footer as @markdotto says. Why not write your own styles for it so it only applies if your <body> tag has a class of .footer-sticky? That way you can toggle the behaviour on or off with just the single class name.

dvanderbeek commented 12 years ago

That's a good idea. I will try that at some point.

dteoh commented 12 years ago

I used a combination of the technique found in http://jsdo.it/Bakey/bootstrap-sticky-footer and http://ryanfait.com/resources/footer-stick-to-bottom-of-page/.

For my html/haml I had something like:

%body
  .topbar
  .main
    .container
      # content here
      .push
%footer.footer

For the scss it was:

html, body {
    height: 100%;
}
.main {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -1*($topbar-height + $footer-height - 10px);
}
.main > .container {
    padding-top: $topbar-height;
}
footer.footer {
    height: $footer-height;
    background: #eee;
}
.push {
    height: $footer-height + $topbar-height;
}

I think the topbar made this a pain to implement because of the $topbar-height padding. I also have a trial-and-error 10px in the margin calculation of the .main style.

It would be really nice to get an official or clean implementation that works with and without the topbar.

dewde commented 12 years ago

in agreement, sticky footer would be killer addition.

pbiggar commented 12 years ago

FWIW, I've spent a few hours trying to make an existing sticky footer implementation work with bootstrap (ryanfait's one) and it's being completely thrown off by bootstrap.

gregmoser commented 12 years ago

I also have tried and handful of different combinations of the above techniques with no simple solution. It seems to me that at this point it is clearly complex enough to build into the core and have it fully supported. Just my opinion

martinbean commented 12 years ago

What exactly are the problems people are facing trying to implement a sticky footer with Bootstrap? I haven't try myself yet but don't see why it would be so difficult?

pbiggar commented 12 years ago

@martinbean: I think people in this thread are looking for two different things

Some want the footer to be properly "sticky" at all time, kinda like facebook's footer. Somewhere that chat and notifications can sit.
Others want it to only be sticky when the content is smaller than the page, and to move down otherwise. This would be used to create a company footer, like the github one at the bottom of this page.

ryanfait's, listed above, does the latter, but is broken by bootstrap. I couldn't make it work - I think because of the 100% in the body, and the offsets and margins used by bootstrap. (I'm sorry I have no more details, I've forgotten it).

@dteoh's implementation above, I think, does the former, and I got it to work with a bit of hacking after hours of trying to make ryanfait's one work. But this is not ideal - it covers content, which is not what my company footer should do.

martinbean commented 12 years ago

For a fixed footer (i.e. Facebook's) you just need to replicate the styles used in .topbar but obviously set bottom: 0; instead of top: 0;. I've done it before in a project.

For a 'sticky' footer (i.e. Ryan Fait's) I'm not sure without having a crack at it myself. I'll see if I can find some time in the next couple of days to have a go.

dvanderbeek commented 12 years ago

I have a version of the fluid layout working with a sticky footer in my fork of the bootstrap repo. It's in examples/sticky.html and requires the sticky.css file in addition to bootstrap.css. Does anyone see anything that could be improved there? Since the body needs padding: 0px for the sticky footer solution to work, I added a class to the container that includes padding to push the content down below the fixed topbar.

https://github.com/dvanderbeek/bootstrap/blob/master/examples/sticky-footer.html

dteoh commented 12 years ago

@dvanderbeek I played around with your solution and it seems to be working nicely with and without the topbar.

mokagio commented 12 years ago

@dvanderbeek your link goes to a 404, and I didn't find the file in your repo -I am kinda new to GitHub browsing-, could you please update it?

Thanks.

dvanderbeek commented 12 years ago

I think I overwrote my whole bootstrap repo to clean it up because I had overwritten a lot of stuff and wanted the newest updates from the main repo. I just added a sticky footer example that I believe is the same as what I had before. Available here: https://github.com/dvanderbeek/bootstrap/blob/master/examples/sticky.html

mokagio commented 12 years ago

I worked out a solution myself, but thanks anyway :) May be I will post it here with the others as soon as I will catch up with some work deadlines.

Cheers.

HashNuke commented 12 years ago

Sticky footer would be a really useful addition to Bootstrap.

li9ht commented 12 years ago

+1

marceloverdijk commented 12 years ago

+1

There is already a .navbar-fixed-top, so why not a .navbar-fixed-bottom?

henrikbjorn commented 12 years ago

Would mena that dropdown should also do dropup

gregmoser commented 12 years ago

This isn't about having a "fixed" navbar, it is about having the footer always at the very bottom of the page. If you screen is 1000px tall, and you only have 100px of content at the top, the 200px footer you have should still be at the bottom of the screen so that you don't end up with 700px of white below the footer

manuelbrunner commented 12 years ago

+1

scottweisman commented 12 years ago

+1

nybbles commented 12 years ago

+1

przeroone commented 12 years ago

+1 for Ryan Fait's

mvattuone commented 12 years ago

While it isn't hard to implement a sticky footer, anything that shaves on tedious work is always nice. +1

batamire commented 12 years ago

+1 - I would definitely like to see this as a part of bootstrap examples!

jrussellnj commented 12 years ago

@mvattuone Agreed, seems like the perfect bootstrappable thing. +1

fcgrx commented 12 years ago

The standard is the Ryan Fait approach, and if Bootstrap breaks this then it should offer up an alternative. +1

yawnt commented 12 years ago

+1

martinbean commented 12 years ago

Has any one tried this with version 2.0? Does Ryan Fait's still 'break' in Bootstrap v2.0? Otherwise, I can only see this adding further cruft to Bootstrap as it requires special HTML and CSS rules in place to function, i.e. your entire non-footer content to be wrapped in an extra <div>—this removes what I believe is Bootstrap's flexibility.

imhotepper commented 12 years ago

I need the fixed footer too! +1

martinbean commented 12 years ago

@stefanescudragos Well implement Ryan Fair's solution.

martinbean commented 12 years ago

I think people are missing the point with Bootstrap: it's a primer, a starter kit, not a CSS framework that tries to cover every scenario known to man.

Ryan Fait's Sticky Footer—despite being the de facto standard—requires additional mark-up (<div class="push">) and styles that are more the exception than the norm. It's easier to add this mark-up and styling than to remove it for those who don't desire a sticky footer.

Nevertheless, I gave implementing Ryan Fait's sticky footer to a HTML page using Bootstrap. I was expecting this to be challenge given that people keep +1'ing it rather than reporting success. Alas, it was a piece of piss as the French would say. See: http://www.martinbean.co.uk/bootstrap-sticky-footer/. Time taken? Less than five minutes.

I can appreciate people love Bootstrap and love Ryan Fair's Sticky Footer solution, but Bootstrap's job is not to build complete web pages for you. If you want something, add it yourself and not ask and expect Twitter to implement it for you. That's not what Bootstrap's about at all.

JustinDrake commented 12 years ago

+1

martinbean commented 12 years ago

+1 for what? Honestly, just put the Sticky Footer styles in yourself!

macropin commented 12 years ago

@martinbean Your example is pretty sweet and simple, but how does it work with the standard Bootstrap navbar-fixed-top? The required body {padding-top: 60px;} messes up the floating footer positioning.

macropin commented 12 years ago

@martinbean actually I found the solution is to give the body content wrapper an id, and apply the padding there.

Overall I say give people what they want. If it's easy to apply a sticky footer with Bootstrap, then at least give an example in the official docs.

KoSoVaR commented 12 years ago

@martinbean Hey I'm sorry to bother you - your solution works great. Being no CSS master, I'm unable to figure out how to make footer 100% width and filled with a color. It seems the left and right sides of the container are "hidden" - or have a lower z-index than the wrapper which is 100% height. I've been trying for a long time and did come up with just putting an extra div at the bottom and wrap the footer in it. The CSS:

html, body {
    height: 100%;
}
footer {
    padding: 17px 0 18px 0;
    width: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -63px;
}
.push {
    height: 63px;
}
.bottombar {
    width: 100%;
    background-color: #000;
}

The HTML, this would come after you close your wrapper.

<div class="bottombar">
    <footer>
      <p>Sample test</p>
    </footer>
</div>

I just want a full width footer with the same color as the top nav bar where I can put some info and what not. Seems like the easiest solution for me, but I'm not sure if it's the right way.

martinbean commented 12 years ago

Hi, @KoSoVaR. No problem at all.

A full-width footer doesn't seem to be too much hassle at all. I just took the .container class off of my <footer> element, and then inserted <div class="container"> inside my footer and seemed to work.

You can check out the modified HTML in this Gist: https://gist.github.com/1855032.

Hope that helps.

KoSoVaR commented 12 years ago

@martinbean Ugh that was easy enough. Honestly was messing around for about 2 hours with different ways. Thank you. One last thing I suppose, adjusting the height - I was playing around with the margin on the wrapper and height on the push, but can't get the height, say, 200px without it scrolling down on the page and loading at the -63 mark, if that makes any sense.

martinbean commented 12 years ago

@KoSoVaR Can't say I really follow, but the height of .push, the negative bottom margin of .wrapper, and the height of the footer need to be the same value. So if your footer is 200 pixels tall (this also includes padding) then your .push and margin-bottom of .wrapper need to be 200px as well.

KoSoVaR commented 12 years ago

@martinbean Thank you sir. This helped greatly - I was missing height on footer since the padding was taking care of it. I missed that! If you're interested, I'm working on this http://members.stockguy22.com/new/. Thanks again, that should be all - I really appreciate your help.

twbs / bootstrap

Sticky footer #306