javascript - 在 Firefox 中使用 display: table-cell 创建 100% 高度 div 的问题

Question

我正在尝试创建一个两栏全屏杂志查看器，左侧有一个固定宽度的横幅。右栏将是响应式的。

利用显示：表格；方法我创建了以下内容：

http://jsfiddle.net/pouncebounce/pTeBP/2/

HTML

<div class="tbl_con">
   <div class="tbl_row">
      <div class="tbl_cell" id="banner">
      </div>
      <div class="tbl_cell" id="publication">
      </div>
   </div>
</div>
<script>
   var viewer = new com.zmags.api.Viewer();
   viewer.setPublicationID("b129d2b8");
   viewer.setParentElementID("publication");
   viewer.show();
</script>

CSS

* {
margin: 0;
padding: 0;
border: none;
}

html, body {
height: 100%;
width: 100%;
overflow: hidden;
}

.tbl_con {
display: table;
width: 100%;
min-height: 100%;
*height: 100%;
}

.tbl_row {
display: table-row;
width: 100%;
min-height: 100%;
*height: 100%;
}

.tbl_cell {
display: table-cell;
min-height: 100%;
*height: 100%;  
}

#banner {
width: 200px;
background-color: #1E90FF;
border-right: solid 3px #fff;
}

#publication {
width: *;
background-color: #FFAB1E;
}

这在最新版本的 IE 和 Chrome 中正确显示，但在 Firefox 中则显示不正确，因为 100% 高度或实际杂志根本不显示。有什么理由吗？

Answer 1

更改*height为height并删除min-height.

确保您在 IE7 中进行测试，但它应该可以工作。