Sticky footer, along with scrolling div without specific height

Asked 12/10, 2011 at 23:34 Answered 26/7, 2017 at 6:52

Solved javascript css html scroll sticky-footer

I'd like a page with a sticky footer, and I'd like the content above it to be scroll-able, while maintaining the stickiness of the footer. But I don't want to hard-code the height of the content area, but instead would like its height to be all the available height except for the height of the footer.

In the long run I would even like for the height of the scroll-able content area to be re-sizable if the window is re-sized, but I'm getting ahead of myself. I'm presuming I'm going to need a combination of CSS and Javascript to acheive this, that CSS alone cannot acheive it?

I've researched of course and have found the CSS overflow property, but my CSS in general is not very good :( Below is some CSS/HTML I've cobbled together based on ryanfait.com's sticky footer tutorial, if somebody can give me some advice using this as a starting point. Bear in mind, I will need straight Javascript, not jQuery, as this will be used in a custom browser (http://tkhtml.tcl.tk/hv3.html). My Javascript unlike my CSS though is pretty good, so an answer combining specific CSS suggestions with general Javascript suggestions (which I will then flesh out), would be ideal.

<html>
    <head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

EDIT: What I've attempted based on first two answers:

I've made the following modifications to the CSS based on parts of the two answers received so far:

<style>
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
  overflow-y: scroll;
}
.footer {
  bottom: 0;
  height: 4em;
  position: fixed;
}
</style>

What this gives me in Chrome are two scrollbars, one very faint, but the more prominent one still allowing content that overflows (maybe I'm using the term incorrectly?) outside of the wrapper area, and over the top (or under the bottom) of the footer, plus outside the entire body. Thanks for help making progress but I still need quite a bit of help. Here's a link to a screenshot of what I'm seeing; I used http://www.ipsum-generator.com/ to generate all the content.

http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG

Innumerable answered 12/10, 2011 at 23:34 Comment(0)

html, body {
    height:100%;
    overflow:hidden;
}
.wrapper {
    overflow-y:scroll;
    height: 90%;
}
.footer {
    position:static;
    bottom: 0;
    height: 10%;
}

Demo: http://jsfiddle.net/vfSM3/

Augustinaaugustine answered 12/10, 2011 at 23:38 Comment(4)

I don't want to hard-code the heights as percentages. I want a fixed height for the sticky footer, and the wrapper height to be dynamic. Sorry if I wasn't specific enough – Innumerable 13/10, 2011 at 0:1

Ok, I see how even in my revised question, I missed your html/body overflow:hidden, so that takes care of the issue of two scrollbars on the right. So I'm seeing the value in your answer and maybe be able to use some Javascript to get the heights just how I want them. – Innumerable 13/10, 2011 at 0:36

I'll accept this one, it works in Chrome albeit not my custom browser, and helps me along the path even though the heights are hard-coded. For my custom browser app I may actually resort to frames: it's a desktop app using web technologies (not unlike what you might create using Adobe AIR), so I don't have the same concerns against frames you might normally have. Plus the CSS and Javascript is quirky since it's a custom browser, and I can easily have more control using frames. Thanks though – Innumerable 14/10, 2011 at 19:14

position: static is the default so it's unnecessary. As a result, bottom: 0 has no effect. – Nealah 15/9, 2022 at 14:33

On the footer div use position fixed and bottom 0 like:

.footer {
  bottom: 0;
  height: 4em;
  position: fixed;
}

Terrorist answered 12/10, 2011 at 23:40 Comment(2)

I don't care about IE. I do need some additional guidance when it comes to the CSS necessary for making the content div scroll-able though. – Innumerable 12/10, 2011 at 23:53

@Kent Only IE6 doesn't support position: fixed; I would recommend more accuracy next time you want to give advice. – Garbo 13/10, 2011 at 1:22

If you want to use fixed height on the footer, you could do the following

.wrapper{
     overflow-y:scroll;
     height:calc(100% - 20px);
}

.footer {
    position:static;
    bottom: 0;
    height: 20px;
}

Note that you need to use the spaces here "100% - 20px" in order for it to work.

Halve answered 26/7, 2017 at 6:52 Comment(0)

Recommended topics

Hot tags