Making 100% content height with a sticky footer

[dcf104]

I’m soooo close :)

I’ve made a layout with a sticky footer where if there is little content the user will see the footer. If there is lots of content it will get pushed down.

What Im trying to do to round it all off is make these red lines on the side of the content section stretch to the footer. But for whatever reason they don’t and only go to the height of the content.

I’ve tried a lot of things and Im stuck :( Can you help?

[Link to JS Fiddle](http://jsfiddle.net/dcf104/ZQEGw/ “Link to JS Fiffle”) Do you require more information :) ? Many Thanks guys and gals

[jurotek]

Like this?…

[dcf104]

Hi Jurotek yes but….. :(

When you do that and if you have a lot of text in the content area the sticky footer doesn’t push down nor does the content area extend to0 :(

any advice is greatly welcomed

[jurotek]

Right, it doesn’t push down. I didn’t go over the whole thing or tested it if your sticky footer works so I went back and sure enough, this whole thing is not done correctly. Give me a few to redo it and make it work.

[Paulie_D]

Then like this: http://codepen.io/Paulie-D/pen/tpJyC

From Chris Coyier’s example: https://css-tricks.com/snippets/css/sticky-footer/

[jurotek]

Here you go

[Author]

Posts