Html+css Layout With 3 Rows, Middle Row Fluid Sandwiched By Fixed Height Rows

I am wondering if there is a pure html+css way to specify a 3 row layout where the middle div is greedy and takes up all the remaining height that the two fixed rows leave behind.

Solution 1:

This can be achiever quite easily with absolute positioning in CSS.

* {
  margin:0;
}
header {
  position:absolute;
  width:100%;
  height:64px;
  top:0;
}
footer {
  position:absolute;
  width:100%;
  height:64px;
  bottom:0;
}
div {
  position:absolute;
  width:100%;
  top:64px;
  bottom:64px;
}

Note, that in real code you'll want to use a class for the inner div otherwise you'll be styling all the div elements.

Here's a more complete fiddle example: http://jsfiddle.net/BMxzn/

Solution 2:

Try this

css

html, body{
    height:100%;    
}

header{
    height:64px;
    background-color:#0C9;
}
footer{
    height:64px;
    background-color:#666;
}
.bodyPan{
    height: calc(100% - 128px); 
}

html

<header></header><divclass="bodyPan"></div><footer></footer>

jsFiddle File

Solution 3:

You could also use box-sizing:border-box to do this.

div
{
    height: 100%;
    background: pink;
    margin-top: -64px;
    padding-top: 64px;

    margin-bottom: -64px;
    padding-bottom: 64px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Incidentally, it has better browser support than calc. (IE8+ and all modern browsers)

[Also notice that for firefox you need to prefix the box-sizing prop with -moz- ]

FIDDLE

Solution 4:

Danield solution is the best cross-browser solution but remember to add to :

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">