Is there any way to make this sticky footer work without javascript?

ideally #footer would be inside #container, but I understand that wouldn’t work with sticky footer and can fake it if necessary. But is it possible at all to have both container and background expand to the bottom? or would javascript be necessary (if so what might be the simplest way)



It’s unclear from that drawing exactly what you need. By default a sticky footer always go to the bottom anyway and so does the background. If you want the top part of the page to appear to be a different colour then just color the top element to match the body background and thus rub out the top part of the page background.

It’s best to put the sticky footer outside of the main container for best results although you can absolutely position it to the bottom of the container but it’s not as consistent as the method shown in the css faq.

Here are some examples but some are older and are not using the most up to date version but can easily be changed.

The latest version is this:

However you can see what you can do if you are creative as in these examples (but some use a slightly older methhod).

It’s all done with smoke and mirrors :slight_smile:

I need the (blue) #border, body, #background divs, all extending down to the very bottom and the Content div stretched out to the bottom. Ideally the footer would be actually inside the border divs, but I couldn’t get it to go to the bottom with that. I’ve tried a number of different methods of getting all those divs to stretch to the bottom and none seemed to work. I was told that it was impossible to acheive what I needed, too. So that’s why the wondering on this specific instance


I’d need to see an actual drawing of what you want but it seems that nearly all the examples I gave above are doing what you want in some way. The problem would be if you wanted multiple graphics rather than those solid colours.

I can tell you that the code you are using will never work and the sticky footer method you are using is completely broken even when it’s put in place correctly. The only method that works is the one documented in the css faq and written (mostly) by me.

Aside from that the height:auto!important hack kills the height in ie7 and shouldn’t be used in conjunction with height:100% in the same rule.

You can’t use multiple min-height:100% as only the first one based on a parent with an actual height will work. Read the faq on 100% height to understand this.

You have to do all your work on the first element (the outer) and apply/fake all the rest. This is the only element that can carry the min-height:100% because it gets it’s height from the body.

Therefore you cannot have multiple divs going to the bottom starting from some arbitrary position down the page . It’s not logical or feasible and has to be faked some other way.

You have to do everything on the first element. You can usually so this using the faux image approach to draw the columns from top to bottom on the first element. You just then rub out the parts you don’t want to see with inner elements as shown in my examples above.

If needed you can overlay absolute background to complete the illusion.

I was told that it was impossible to acheive what I needed, too. So that’s why the wondering on this specific instance

It’s impossible to achieve the way you are approaching it but it sounds pretty easy to me using the methods outlined above unless the real example is more complicated.

If you show me a wireframe of what you want I’ll knock up an example.

I knocked you up an example anyway :slight_smile:

That seems to meet all the criteria you asked for.

Wasn’t impossible just 10 mins work :slight_smile: