Keeping footer at the bottom of window on site that scrolls horizontal

Question

I've got a completely horizontal scrolling site,

TopNav (fixed position)

Nav (fixed position)

Content (sideways scrolling)

Footer (fixed position)

Everything seems to be working great but the problem I have is that if the content is big enough to scroll horizontally, it puts the footer behind the horizontal scroll-bar, so on a few pages I made the #footer { bottom:16px } or so to take into account horizontal the scroll-bar being there.

What i'm having issues with is different monitor resolutions. Obviously the content will scroll horizontally or not based on the window size. Is there any way to keep the footer at the bottom (or above the horizontal scroll bar) NO MATTER WHAT resolution or window size?

What browser are you using? Because in firefox I can't reproduce your problem. You could give the footer a padding-bottom:16px; That way a scollbar can't block any content and if the scrollbar isn't there you dont have 16px of whitespace below the footer. — Gerben, May 25 '11 at 16:36
The issue is within any browser actually. My content div is sideways scrolling. If the content scrolls sideways the footer is hiding behind the horizontal scroll hence adding the bottom:16px. If the content doesn't have to scroll sideways (meaning not enough content to force scroll) the footer is 16px above what it should be. — Brandon, May 25 '11 at 16:42
see it too: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page — , Jul 26 '12 at 19:31

score 35 · Accepted Answer · edited Sep 01 '16 at 20:33

35

After a lot of trial and error, I found this to be the best solution for an always-on-the-bottom-footer:

HTML:

<div class="footer">

    <div class="footer_contents"></div>

</div>

CSS:

.footer {

    height:24px; // Replace with the height your footer should be
    width: 100%; // Don't change
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    position: fixed;
    bottom: 0pt;
    left: 0pt;

}   

.footer_contents {

    height:24px; // Replace with the height your footer should be
    width: 1000px; // Visible width of footer
    margin:auto;

}

edited Sep 01 '16 at 20:33

MrBoJangles

12,127
17
61
79

answered Jun 05 '11 at 23:31

Gerben van Dijk

868
6
15

2

Your fix helped me ! I also had to set bottom margin of the div (main div) above the footer to a value is greater than height of footer. This prevents my footer coming over the body content when page is resized. Hope this helps. `.main { padding: 0px 12px; margin: 12px 8px 40px 8px; min-height: 420; } ` `.footer { font-family:Arial; font-size:13px; position: fixed; bottom: 0pt; left:0pt; width: 98%; background: #272727; color: #fff; text-align: right; height:26px; }` – Ram Mar 11 '13 at 04:22
great addition @dasariramacharanprasad :) – Gerben van Dijk Oct 01 '14 at 07:01
position: fixed; -- what I needed. Thank you – JBeen Apr 11 '23 at 17:17

score 2 · Answer 2 · edited Nov 10 '12 at 09:45

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

The CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}

And one simple CSS rule for IE 6 and IE 5.5:

#container {
    height:100%;
}

score 0 · Answer 3 · answered May 25 '11 at 16:43

There a two possibilities I see:

1st Option Force body to show the scroll bar always. But this may look strange.

body { overflow-x: scroll; }

2nd Option Have your content container always above your footer. this is possible if your footer has a fixed height. Then you will have the scroll bar above your footer.

<div id="contentWrapper">
    <div id="content">Here comes your content</div>
</div>

And here the CSS i'll explain now

body, html {
    height: 100%;
    overflow: hidden;
}

#contentWrapper {
    overflow-x:auto;
    overflow-y: hidden;
    height: 100%;
    margin-top: -16px; // add the footer height
}

#content {
    padding-top: 16px; // add the footer height
    width: 6000px;
}

The #contentWrapper has to have an negative margin in scroll bar height plus your footer height. The #content has to have the same value as top padding, so your content at the top will not be out the page.

score 0 · Answer 4 · answered May 25 '11 at 17:07

My best idea would be to have the wide content as part of its own scrollable div. The footer would then stay in it's place at the bottom of the content, appearing to always be centered.

If you want the scroll bars to not be above the footer, you can probably do something fancy with a div and some css, such as put an empty div the size of the footer below the wide content and make the real footer have top: -(the footer's height)

Keeping footer at the bottom of window on site that scrolls horizontal

4 Answers4