CSS sticky footer with header outside of page wrapper
All sticky footers require you to place all content in the page wrapper except for the footer. I have a situation where the title needs to be outside of the page wrapping:
<div id="header">...</div>
<div id="page-wrap">...</div>
<div id="footer">...</div>
Does anyone have any idea what the CSS padding is in this case?
Will there be something like the next job?
<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 details, but I'm assuming you want some formatting not to apply to #header. The solution is formatting with #contents, not # page-wrap. Do not actually put formatting on # page-wrap other than what is required to click the footer.
source to share
I used a second wrapper class to make the sticky header and footer. While a sticky header will work fine inside a wrapper, there are many suggested solutions for a non-sticky footer.
I found that some of these workarounds are causing header issues. After trying many of the proposed workarounds, I found that they stick both in their own class wrapper with the same properties as the original wrapper, which makes it sticky to the rest of the page, requiring minimal code.
source to share