html - 高度为 100% 的 div-css 表，在 IE7 中未调整 div-rows 的大小

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

我没有找到这个问题的解决方案，所以我去使用......它在所有浏览器中都可以正常工作。