html - 高さのdiv-cssテーブル：100％、IE7でdiv行のサイズが変更されない

Question

ヘッダー、ボディ、フッターで画面の高さ (最小) の 100% を占めるレイアウトを作成したい ... ボディとフッターにはハードコードされた高さがあり、ボディはそれに応じてサイズ変更できる伸縮性があります ... 空の場合以下のコンテンツは残りの高さのスペースを取り、コンテンツがいっぱいになると伸びて大きくなり、フッター div が押し下げられます。

うまく機能しますが、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;
}

助言がありますか？

Answer 1

これを試して：

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

追加 ：

**.content-holder {
    height: 100%;
    width: 100%;
    display: table;
}
.body{
  height: 76.8%;
}**

Answer 2

$(document).ready(function(){
 var DocHeight = $(document).height()-150;
 $('.content-holder').css('height',DocHeight+'px');
});

Answer 3

この問題の解決策が見つからなかったので、行って使用します...すべてのブラウザーで正常に動作します。