CODEWITHSUNDEEP
htmlcssinternet-explorer
Jacob
Jacob

Reputation: 4021

100% height issue in Internet Explorer

I have an application where my layout get's bult dynamically. It can be like a table (1X1, 2X2 or 3X3). In Firefox and Chrome my div ViewPortContent is resized the right way. But in IE nothing happens. The ViewPortContent doesn't get resized so that it fills the remainig content as in Firefox or Chrome.The 100% height atributte doesn't work correct? Can you help?

Below is my JsFiddle(Try it in IE and Mozilla)

.dhDivTable{
height:500px;
width:100%;
background:black;
display: table;
table-layout:fixed;
}
.dhDivRow {
display: table-row;
}
.dhViewPortWrapper {
display: table-cell;
padding: 3px;  }

.dhViewPortContent{
 border: solid 1px violet;
 height:100%;
 width:100%;
 display: table;
 position:relative;
 color:white;
}

http://jsfiddle.net/qqTtQ/1/

Upvotes: 1

Views: 167

Answers (1)

Gareth Cornish
Gareth Cornish

Reputation: 4356

Palash is right in the general case, but your case is slightly more complex. You need to add a height directive to the .dhViewPortWrapper class for the height to be derived, but the height you set must be the proportion of the table height assigned to the current row. You will need to assign this dynamically. So, if you know that there are going to be two rows, you may define the dhViewPortWrapper div as:

<div class="dhViewPortWrapper" style="height: 50%;">

If you need your rows to have dynamic heights, you'll need to work out how to calculate the heights, and apply them.

Upvotes: 1

Related Questions