I'm trying to make a website where header and footer have fixed position while content scrolls in the middle.
<header style="position:fixed"></header>
<div id="content">some content</div>
<footer style="position:fixed"></footer>
I created what I thought would work but it doesn't. Here's jsFiddle with the whole thing. As you can see, part of content is hidden under the footer and beyond (I can't see 'HELLOWEEN' in the end). What must I change to fix it? Thanx