[英]Issues creating 100% height divs using display: table-cell in Firefox
I am trying to create a two-column, full-screen magazine viewer, with a fixed width banner on the left. 我正在尝试创建一个两栏的全屏杂志查看器,左侧带有固定宽度的横幅。 The right column will be responsive. 右列将响应。
Utilising the display:table; 利用display:table; method I have created the following: 我创建了以下方法:
http://jsfiddle.net/pouncebounce/pTeBP/2/ http://jsfiddle.net/pouncebounce/pTeBP/2/
HTML 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 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;
}
This displays correctly in the latest version of IE and Chrome, but not in Firefox, where the 100% heights, or the actual magazine, do not appear at all. 这在IE和Chrome的最新版本中可以正确显示,但在Firefox中则不能正确显示,在Firefox中根本不会显示100%的高度或实际杂志。 Any reason why? 有什么原因吗?
Change *height
to height
and remove min-height
. 将*height
更改为height
并删除min-height
。
Make sure you test in IE7, but it should work. 确保您在IE7中进行测试,但它应该可以工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.