CODEWITHSUNDEEP
htmlcss
Tyler Murry
Tyler Murry

Reputation: 2815

Accordion Page Layout CSS Question

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

enter image description here

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?

Upvotes: 1

Views: 425

Answers (4)

Blender
Blender

Reputation: 298512

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/.

Upvotes: 1

Hubro
Hubro

Reputation: 59378

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/

Upvotes: 0

user578895
user578895

Reputation:

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

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

Upvotes: 1

bhebsquines
bhebsquines

Reputation: 1

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>

Upvotes: -1

Related Questions