Force <div></div> to the bottom of the web page centered

javascript html css ajax

17,875

Solution 1

I think what you're looking for is this: http://ryanfait.com/sticky-footer/

It's an elegant, CSS only solution!

I use it and it works perfect with all kinds of layouts in all browsers! As far as I'm concerned it is the only elegant solution which works with all browsers and layouts.

@Josh: No it isn't and that's what Blankman wants, he wants a footer that sticks to the bottom of the document, not of the viewport (browser window). So if the content is shorter than the browser window, the footer sticks to the lower end of the window, if the content is longer, the footer goes down and is not visible until you scroll down.

Twitter Bootstrap implementation

I've seen a lot of people asking how this can be combined with Twitter Bootstrap. While it's easy to figure out, here are some snippets that should help.

// _sticky-footer.scss SASS partial for a Ryan Fait style sticky footer

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -1*($footerHeight + 2); /* + 2 for the two 1px borders */
}

.push {
  height: $footerHeight;
}

.wrapper > .container {
  padding-top: $navbarHeight + $gridGutterWidth;
}

@media (max-width: 480px) {
  .push {
    height: $topFooterHeight !important;
  }
  .wrapper {
    margin: 0 auto -1*($topFooterHeight + 2) !important;
  }
}

And the rough markup body:

<body>
    <div class="navbar navbar-fixed-top">
        // navbar content
    </div>
    <div class="wrapper">
        <div class="container">
            // main content with your grids, etc.
        </div>
        <div class="push"><!--//--></div>
    </div>
    <footer class="footer">
        // footer content
    </footer>
</body>

Solution 2

If I understand you correctly, you want the toolbar to always be visible, regardless of the vertical scroll position. If that is correct, I would recommend the following CSS...

  body {
    margin:0;
    padding:0;
    z-index:0;
  }

  #toolbar {
    background:#ddd;
    border-top:solid 1px #666;
    bottom:0;
    height:15px;
    padding:5px;
    position:fixed;
    width:100%;
    z-index:1000;
  }

Solution 3

I just want to be clear on what your saying here:

bottom of the web page (the document, not the viewport)

Naturally, a div will be at the bottom of the "document", depending on your layout.

If it's not going to the bottom of a document, or not paying attention to how tall your columns are, is it because your floating? Clear: both; would be in order to solve that.

The sticky footers are what I think your looking for, but when you say document, and not the viewport, I get a bit confused. Sticky footers typically do this: Watch for short pages, and if its shorter than the view port, the sticky footer tacks the footer div to the bottom.

Here's some sticky footers (there's gajillions of em, but this is in order of my favorites):

http://www.cssstickyfooter.com/
http://css-tricks.com/sticky-footer/
http://ryanfait.com/sticky-footer/ (listed previously)
http://brassblogs.com/blog/sticky-footer
http://alistapart.com/ (theres one there I just can't find it)

Maybe if you gave a quick illustration or were a bit more specific on what you want? Hope this helps :D

-Ken

17,875

Author by

Blankman

... .. . blank

Updated on October 23, 2022

Comments

Blankman over 1 year

I have a <div>...</div> section in my HTML that is basically like a toolbar.

Is there a way I could force that section to the bottom of the web page (the document, not the viewport) and center it?
strager about 15 years

Doesn't work when resizing the browser for me. Looks good otherwise -- snaps to the bottom of the document or, if the document doesn't scroll, to the bottom of the viewport (instead of just floating).
markus about 15 years

-1 because it talks about the viewport, that's not what he wants!
markus about 15 years

I think he just ment that if the document is longer than the viewport, the footer should not show until you scroll to the end. which is a sticky footer. with position absolute you would get a sticky viewport-footer which is in most cases ugly.
Josh Stodola about 15 years

Is the footer always visible? Regardless of scroll position?
Blankman about 15 years

Josh, any cross browser issues with this technique?
Josh Stodola about 15 years

Well, I know that IE6 doesn't support fixed positioning. But I tried it in IE7 and FF2 and it works.
Josh Stodola about 14 years

@Hector I wonder if adding position:relative to the body fixes that
Hector Scout about 14 years

position:relative makes it so it doesn't stick to the bottom.