Question

我想制作带有标题，正文和页脚100％屏幕高度（分钟）的布局......主体和页脚将具有硬编码高度，并且主体将具有弹性以相应地调整大小。如果空的或较少的内容将占用剩余的高度空间，如果内容的数量会拉伸并且更大，则按下页脚div。

效果很好，但在IE7中却不行。

<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

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

div-css表的高度：100％，div-rows没有在IE7中调整大小

3 个答案: