CODEWITHSUNDEEP
htmlcsscss-position
Michal Artazov
Michal Artazov

Reputation: 4648

Header and footer with fixed position while content is scrollable?

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

Upvotes: 13

Views: 69044

Answers (3)

peterchon
peterchon

Reputation: 250

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;}

Upvotes: 6

Nick Tomlin
Nick Tomlin

Reputation: 29221

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

Upvotes: 19

Stephen Thomas
Stephen Thomas

Reputation: 14053

  1. remove the position styles on the header and footer
  2. set a height on the content
  3. 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)

Upvotes: 3

Related Questions