Accordion Page Layout CSS Question

I'm trying to construct a page layout that will look something like this:

In this case, A, B and C are three divs that house 100% of the page height. The goal is to construct the CSS so that A and C are static heights and B 开发者_高级运维is the variable that fills the space.

What's the best way to go about this?

I think you might be looking for the glorious Sticky Footer. Scale the preview box vertically to see what the design does.

The footer sits at the bottom of the page when the middle <div> doesn't push it down, but it floats down with the page when the content pushes it.

The method is a bit inelegant-looking, but it's easy to do:

<div id="wrap">
    <div id="upper">Foo</div>
    <div id="middle">Foo</div>
</div>

<div id="lower">Foo</div>

The trick is all in the duct tape: http://www.cssstickyfooter.com/.

The problem with the other answers is that if your center content overflows, the layout blows up. Try this:

http://jsfiddle.net/cwolves/JgS7f/

I'd say position the rows absolutely. You didn't specify what you wanted to happen if row B content exceeded page height. Should row B get a scrollbar or should row C be pushed out of the viewport, giving body a scrollbar?

My response assumes the former.

http://jsfiddle.net/aWjr9/4/

You can do that in php

<style>
.container .a{  border:1px red solid; height:100px; }

.container .b{  border:1px red solid;  }

.container .c{  border:1px red solid; height:150px;}

</style>

<div class="container">
<div class="a">
A
</div>
<div class="b" style="height:<?php echo $x;?>px;">
B
</div>
 <strong><div class="c">
C
</div></strong>