Question

I’m trying to create a page with a panel on the left side. The panel has a header, a content area and a footer. The main panel wrapper div is supposed to be 100% of the height of the page. The header and footer do not have a specified height because I only want them to be large enough for their text and padding while the center content area I want to be 100% of the container minus whatever the height of the header and footer is. I’m not sure how or if I can do this in css. Anyone know what to do here? Thanks.

The html page & css is here – https://gist.github.com/1641918

Answer 1

You can use display as table to accomplish this. By setting a height of 100% on the content ‘row’ and then 0% on the others. Tables try and make their rows match as closely as possible the specified heights.

http://jsfiddle.net/PZALU/

html, body { height: 100%; width: 100%; }
div#container { display: table; height: 100%; width: 100%;}
div#container > div { display: table-row; }
div#container > div > div { display: table-cell; border: 1px solid gray; }
div#header { height: 0%; }
div#content {height: 100%; background: lightgray; }
div#footer { height: 0%; }