CODEWITHSUNDEEP
javascripthtmlcss
mpdc
mpdc

Reputation: 3560

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; method I have created the following:

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;
}

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. Any reason why?

Upvotes: 0

Views: 1132

Answers (1)

Halcyon
Halcyon

Reputation: 57709

Change *height to height and remove min-height.

Make sure you test in IE7, but it should work.

Upvotes: 1

Related Questions