CODEWITHSUNDEEP
htmlcssscrollsticky-footer
Brandon
Brandon

Reputation: 409

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

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?

Upvotes: 17

Views: 83981

Answers (5)

Hasan Uddin
Hasan Uddin

Reputation: 492

use Bootstrap CSS class

class="fixed-top"

Upvotes: 0

Gerben van Dijk
Gerben van Dijk

Reputation: 878

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;

}

Upvotes: 36

Dennis
Dennis

Reputation: 41

<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%;
}

Upvotes: 2

rk1s
rk1s

Reputation: 253

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)

Upvotes: 0

DanielB
DanielB

Reputation: 20210

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.

Upvotes: 0

Related Questions