css - Is there a way to create a variable width header and footer, with a scrolling main div in the middle? -

css - Is there a way to create a variable width header and footer, with a scrolling main div in the middle? -

i'm interesting in building css layout header, footer , div#main intended single page app/site. i'm looking back upwards major browsers ie9 , up, , mobile browsers / mobile webviews (for hybrid apps).

i need header stick top of window view (simple enough), footer stick bottom of window view (kinda tricky, not difficult), , div#main in between them fit exact height don't take up, , 'scrollable.' grab is, i'd font sizes within header , footer vary bit across devices , browsers, can't set height (can i?). , if that's case, can't set height of div#main, makes hard place it.

any help rock!

you can utilize position: absolute; , give footer , header height in %; create overflow: hidden them , overflow: auto content div, assign top , bottom equal width of header , footer it.

demo

css

body { height:100%; width:100% } #header { background: gray; position:absolute; top:0px; left:0px; height:10%; right:0px; overflow:hidden; text-align: center; } #content { background: #333; position:absolute; top:10%; bottom:10%; left:0px; right:0px; overflow:auto; text-align: center; } .test { height: 200px; width: 200px; margin: auto; background: red; text-align: center; } #footer { background: grey; position:absolute; bottom:0px; height:10%; left:0px; right:0px; overflow:hidden; text-align: center; }

html

<div id="header">header</div> <div id="content"> <p> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p> <div class="test"> test div </div> <p> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p> </div> <div id="footer">footer</div>

css html5 css3 layout