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

【问题标题】：div-css table with height: 100%, div-rows not resizing in IE7高度为 100% 的 div-css 表，在 IE7 中未调整 div-rows 的大小
【发布时间】：2017-01-17 02:00:29
【问题描述】：

我想使用页眉、正文和页脚制作占屏幕高度（最小）的 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;
}

有什么建议吗？

【问题讨论】：

愚蠢的问题，但您使用的是重置表，对吗？

标签： html css internet-explorer-7 tablelayout

【解决方案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%;
}**

【讨论】：

【解决方案2】：

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

【讨论】：

如果要根据屏幕设置高度，请从 css 中删除 height:100%，然后使用 $(window).height() 而不是 $(document).height()
你想要固定高度的页眉和页脚吗？
页眉和页脚高度的百分比对我不起作用。布局必须保持页眉和页脚的高度，并使正文可调整大小。不确定的2个案例测试： 1. 空体...页脚必须在底部。 2. 正文必须内容丰富，内容太多需要滚动条。第二种情况......窗口必须有全局滚动条，主体只要内容需要它，页脚保持它的高度并位于滚动页面的末尾。如果这件事是用带有 tr td 的表完成的，它就可以了！

【解决方案3】：

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

【讨论】：