div-css table with height: 100%, div-rows not resizing in IE7

Question

I want to make layout that take 100% of the screen height (min) with header, body and footer ... the body and the footer will have hard-coded height and the body will be elastic to resize accordingly ... if empty or less content will take the rest height space, if full of content will stretch and be bigger, pushing down the footer div.

It works great but not in IE7.

http://jsfiddle.net/swkrt/

<div class="content-holder">
  <div class="header">header</div>
  <div class="body">body</div>
  <div class="footer">footer</div>
</div>

body, html {
    margin: 0;
    height: 100%;
}

.content-holder {
    height: 100%;
    display: table;
}

.content-holder div {
    display: table-row;
}

.header {
    height: 50px;
}

.footer {
    height: 100px;
}

any suggestions?

Answer 1

I didn't find solution for this issue so i go and use ... it works fine in all browsers.