2

I'm trying to get a sticky footer working, but my problem is I need the nested div #container to extend all the way to the footer. I've tried various ways but can't make any headway.

The footer should stick to the bottom when content is short. 

<body>
    <div id="wrapper">
        <div id="header">click here to reset</div>
        <div id="banner-region">click here to add content</div>
        <div id="navigation"></div>
        <div id="content">
            <div id="container">
                <p>This div should extend all the way down to the bottom and touch the footer</p>
            </div>
        </div>
    </div>
    <div id="footer"></div> 
</body>

Fiddle: http://jsfiddle.net/Vu2uP/3/

jmorc
  • 560
  • 1
  • 3
  • 14
  • Might be a case for `flexbox`. – CBroe Feb 17 '14 at 19:07
  • What do you mean by "sticky footer"? Do you want the footer to always be visible and have the content scroll behind it? – jonsuh Feb 17 '14 at 19:08
  • 1
    @jonsuh No, sorry. I mean that the footer will always be at the bottom of the page, even with short content – jmorc Feb 17 '14 at 19:11
  • for your background, you could use somehow the faux columns technique with linear-gradient or box-shadow in body background : http://jsfiddle.net/Vu2uP/4 or http://jsfiddle.net/Vu2uP/6 with background image too – G-Cyrillus Feb 17 '14 at 19:24
  • possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) – Etheryte Feb 17 '14 at 21:56

1 Answers1

1

I think you should take a look at this if you want the container to always go down to the fixed footer: http://www.pmob.co.uk/temp/sticky-footer-wide-header-footer2.htm