我正在尝试创建一个两栏的全屏杂志查看器,左侧有一个固定宽度的横幅。右栏将响应。
利用显示:表格;我创建了以下方法:
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% 高度或实际杂志根本不会出现。有什么理由吗?
最佳答案
将 *height
更改为 height
并删除 min-height
。
确保您在 IE7 中进行测试,但它应该可以工作。
关于javascript - 使用显示 : table-cell in Firefox 创建 100% 高度 div 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19448191/