CSS sticky footer with header outside the page wrap

Question

All the sticky footers require that you place all the content within a page-wrap except for the footer. I have a situation where the header must reside outside the page-wrap:

<div id="header">...</div>
<div id="page-wrap">...</div>
<div id="footer">...</div>

Anyone know what the addendum to the CSS would be in this case?

Answer 1

Wouldn't something like the following work?

<div id="page-wrap">
  <div id="header">Header stuff</div>
  <div id="contents">Actual page innards</div>
</div>
<div id="footer">Footer text</div>

You didn't give much detail, but I'm guessing that you want some sort of formatting to not apply to #header. The solution is to put that formatting on #contents, not #page-wrap. In fact, don't put any formatting on #page-wrap other than what is required to push the footer down.

Answer 2

Why would you have the header outside the page wrapper?

What about having it like this:

<page-wrapper>
    <header-wrapper>
        header stuff
    </header-wrapper>
    <content-Wrapper>
        content stuff
    </content-wrapper>
</page-wrapper>
<footer />

Answer 3

I used a second wrapper class to make a sticky header and footer. While the sticky header will work fine inside the wrapper there are lots of proposed solutions to the footer not sticking. I found some of these workarounds were causing the header issues. After trying many of the suggested workarounds I found sticking both in their own class wrapper with the exact same properties as the original wrapper makes both sticky with the rest of the page while requiring minimal code.