Header and footer with fixed position while content is scrollable?

Question

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

That fiddle works for me on Chrome. I changed the top line to 'Home 1" and it appears just under the red bar when the scroll bar is moved to the top. — Lee Meador, Aug 13 '13 at 17:46

Nick Tomlin · Accepted Answer · 2013-08-13T17:55:59.443

19

The easiest fix for this is to add padding equivalent to the height of your static header and footer:

#content {
    width: 80%;
    margin: 0 auto;
    padding: 60px 0;
}

JSfiddle

edited Aug 13 '13 at 17:55

answered Aug 13 '13 at 17:49

Nick Tomlin

28,402
11
61
90

@MichalArtazov At first glance this looks like the solution until you scroll the content. The scrollbar overlaps the header which is not ideal since the header is not scrolling. It should be that the content section itself has a scrollbar only and the header and footer have no scroll bar. See [JSFiddle](http://jsfiddle.net/yASFU/) provided by peterchon solution. – dfashimpaur May 02 '19 at 13:39

score 6 · Answer 2 · answered Aug 13 '13 at 17:57

6

http://jsfiddle.net/yASFU/

<header>header</header>
<section>
    <div class="push">push</div>
</section>
<footer>footer</footer>

html, body {height:100%; margin:0; overflow:hidden;}
header, footer {display:block; background-color:black; height:10%;}
section {height:80%; background-color:lightblue; display:block; overflow:auto;}
section .push {height:4000px;}

answered Aug 13 '13 at 17:57

peterchon

250
1
6

that's one way to do it but not suitable for my situation, anyway thanx – Michal Artazov Aug 13 '13 at 19:21

score 3 · Answer 3 · answered Aug 13 '13 at 17:51

3

remove the position styles on the header and footer
set a height on the content
add a style overflow-y:auto to the content

If you want the content height to match the browser window (less the header and footer), use javascript to set it (and adjust on window resize events)

answered Aug 13 '13 at 17:51

Stephen Thomas

13,843
2
32
53

also interesting solution but not suitable for my situation, anyway thanx – Michal Artazov Aug 13 '13 at 19:21

Header and footer with fixed position while content is scrollable?

3 Answers3

Linked