Question

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

利用display：table;方法我创建了以下内容：

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中进行测试，但它应该可以正常工作。

使用display：table-cell在Firefox中创建100％高度div的问题

1 个答案: