scrolling content between fixed header & footer with variable height

Question

I have a header and a footer, that should be position: fixed,
both have content that varies their height according to the page width, I need the content between them to be scroll-able and that the header & footer will not cover it.
here is an example (of the problem): http://jsfiddle.net/ilyaD/bNSZu/2/
Any ideas for a solution?

score 0 · Accepted Answer · answered May 20 '12 at 14:02

0

DEMO

Use max-height,min-height and height as percentages.Along with overflow-y:auto

answered May 20 '12 at 14:02

Vivek Chandra

4,240
9
33
38

i think you didn't update the demo since i see my fiddle only – ilyo May 20 '12 at 14:06
thanx but this doesn't solve the problem, i still have a the size of the header is not fluid – ilyo May 20 '12 at 14:35

score 0 · Answer 2 · answered May 20 '12 at 14:03

0

You can set a max-height to #main div and add this style to #main to fire the scroll bar

#main {
   overflow-y:auto; 
}

Working Fiddle

answered May 20 '12 at 14:03

Prasenjit Kumar Nag

13,391
3
45
57

scrolling content between fixed header & footer with variable height

2 Answers2

Linked