Question: I am trying to make 3 div's in row design. Where the header and footer have fixed height. 
The center div expands to fill the empty space. I have tried but the closest I got is the code below. Still having problems with the center div which expands over the footer div. 

html:

```
<div id='container'>
    <div id='rowOne'>row 1</div>
    <div id='rowTwo'>row 2</div>
    <div id='rowThree'>row 3</div>
</div>

```

css:

```
#rowOne {
    width: 100%;
    height: 50px;
    background: green;
}
#rowTwo {
    width: 100%;
    background: limegreen;
    height:100%;
    overflow:hidden;
}
#rowThree {
    width: 100%;
    position: fixed;
    clear: both;
    background: green;
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
}
#container {
    height: 100%;
}

```

![enter image description here](https://i.stack.imgur.com/Ig6pV.png)

Answer: 
Three Row pure CSS

I know this post is getting on a bit, but despite claims to the contrary, you can do this very simply with CSS. No need for JavaScript, jQuery, CSS 3 hacks etc.

Here's a couple of jsf's that show fixed header and footer and dynamic body div.

This first one shows fixed pixel height header and footer and dynamic body **EXACTLY** as you wanted in your image

<http://jsfiddle.net/LBQ7K/>

```
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>

html, body, {
height: 100%;
}

.header {
position:   absolute;
top:    0px;
height:     50px;
width:      100%;
background: #f00;
}

.footer {
position:   absolute;
bottom: 0;
height:     50px;
width:      100%;
background: #00f;
}

.cssBody {
position:   absolute;
top:    50px;
bottom: 50px;
width:  100%;
background: #0f0;
}

```

The second shows you can use the same technique to have dynamic headers & footers.
<http://jsfiddle.net/reqXJ/>

```
    <body>
    <div class="header"><p>Header</p></div>
    <div class="cssBody"><p>Hello World</p></div>
    <div class="footer"><p>Footer</p></div>
</body>

html, body, {
    height: 100%;
}

.header {
    position:   absolute;
    top:        0px;
    height:     15%;
    width:      100%;
    background: #f00;
}

.footer {
    position:   absolute;
    bottom:     0;
    height:     15%;
    width:      100%;
    background: #00f;
}

.cssBody {
    position:   absolute;
    top:        15%;
    bottom:     15%;
    width:      100%;
    background: #0f0;
}

```
You can fake this by absolutely positioning the rows, and adding padding to top and bottom for the middle row. You cannot do this like you were doing with tables

```
#container { position:relative; height:800px } // needs height

#rowOne, #rowTwo, #rowThree { position:absolute }

#rowOne { top:0; left:0 }
#rowThree { bottom:0; left:0 }

#rowTwo { left:0; top:0; padding:50px 0; } // top and bottom padding 50px

```