Three-Row CSS Layout

Question

I am currently creating HTML and CSS for the application that I am developing.

This app has a fixed height header, a fixed height footer and a middle area that should occupy the rest of the space.

The problem is that I want the header and footer to stay fixed in place all the time, and the content scrolls if it gets too big.

I managed to get scrollable content with a fixed header and footer, but this uses a push div that makes it so that the scroll bar disappears behind the header and the other option fades behind the footer. I am having difficulty getting a div to scroll when it exceeds the maximum size without giving it 100% height.

Here is what I still have:

http://jsfiddle.net/7gmpu/

Is this possible with pure CSS? Or do I need to calculate the window height using javascript every time I resize?

Is my "decision" even close?

Answer 1

If you want your elements to be fixed, you should use CSS positioning. Your current solution is already close, but it is a bit complicated.

Suppose you want to have three blocks:

HEADER CONTENT FOOTER 

the most natural way is to place them in a container (not required if your site consists of only these 3 elements) and positions them as absolute. The top of HEADER is 0, for the bottom of FOOTER it is 0. In CONTENT, you must adjust the top and bottom to make sure that this is the height of your footer / header.

So, if you use #wrapper, #header, #content and #footer, this is the code you need:

 #wrapper{position:absolute; top:0;bottom:0;width:100%;} #header, #footer, #content{position:absolute; width:100%;} #header{top:0; background-color:#faa;height:50px;} #content{top:50px;bottom:150px; overflow:auto;} #footer{bottom:0px; background-color:#afa; height:150px} 

Demo

EDIT : Your updated demo . Do not specify a height value if you want to use fixed positioning. Instead of implicit height, use top and bottom . Also use overflow:auto for scrollbars. I made the following changes:

 #mid { background: #222; /* dropped height */ bottom:50px; /* implicit height */ overflow:auto; /* automatical scrollbars */ width: 100%; position: fixed; top: 100px; } 

Answer 2

You can achieve the desired effect using very small markup. Given an HTMl that looks like

  <header> Header </header> <div id="container"> <article class="post"> A1; </article> <article class="post"> A2; </article> <article class="post"> A3; </article> <article class="post"> A4; </article> <article class="post"> A5; </article> </div> <footer> footer </footer>? 

you can create it using the following css:

  * { box-sizing: border-box; } html, body { height: 100%; } body { padding-bottom: 5em; padding-top: 7em; position: relative; } body > div#container { position:absolute; top: 7em; bottom: 5em; width: 100%; overflow-y: scroll; min-height: 3em; } body > header { height:7em; position:relative; margin-top: -7em; } body > footer{ height:5em; position: absolute; bottom: 0; } 

and you must be ready to go. You can see a live example here: http://jsfiddle.net/ramsesoriginal/Mg4Ad/

In the header code above, there is 7em , the footer area is 5em and #container is compressed to 3 em ;