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: 
Seems like you are try to do a sticky footer, well... you will need a few hacks:

HTML:
-----

```
<div id='container'>
   <div class="header">
      <h1>Sticky Footer!</h1>
   </div>
   <div id='rowOne'>row 1</div>
   <div id='rowTwo'>row 2</div>
   <div id='rowThree'>row 3</div>
   <div class="push"></div>
</div>
<div id='footer'></div>

```

CSS
---

```
.container {
   min-height: 100%;
   height: auto !important;height: 100%; 
   /* the bottom margin is the negative value of the footer's height */
   margin: 0 auto -142px;
}
.footer, .push{
   height: 142px; /* .push must be the same height as .footer */
}

```

**Note:** Replace the footer and push height for your fixed height and don't forget to insert the push div after the rows in the container.
In response to your comment on jedrus07's answer:

> 
> all this sollutions expand the center div behind the footer div. I want a solution with each div having only his own space.
> 
> 
> 

The only way to do that is with CSS 3 calc(). If you don't need to support very many browsers, that's an option, and here's a demo of it in action:

<http://jsfiddle.net/5QGgZ/3/>

(Use Chrome or Safari.)

HTML:

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

```

CSS:

```
html, body, #container {
  height: 100%;
}
#rowOne {
  height: 50px;
  background: #f00;
}
#rowTwo {
  height: -webkit-calc(100% - 100px);
  background: #0f0;
}
#rowThree {
  height: 50px;
  background: #00f;
}

```

If you want wider browser support, you're going to have to go with a sticky footer solution like the ones jedrus07 mentioned, or Tom Sarduy's answer.