height:100% not working in Internet Explorer

Question

I have a question about the CSS property height:100% in Internet Explorer.

height:100% does not work in IE, but it does in Firefox and Chro

Answer 1

In order to use height: 100%, the parent container should have a fixed height.

So for example while this should work:

<div style="height: 400px;">
    <div style="height: 100%; background: red; float: left; width: 200px;">
        Left Column
    </div>
    <div style="height: 100%; margin-left: 210px;">
        Right Column
    </div>
</div>

The following will not work:

<div style="height: 100%;">
    --- same code
</div>

One way to achieve a fixed height when you don't know parent's height is using position: absolute;.

<div style="position: relative;">
    <div style="position: absolute; left: 0; top: 0; bottom: 0; width: 200px; background: red;">
        Left Column
    </div>
    <div style="margin-left: 210px;">
        Right Column
    </div>
</div>

Otherwise you could use javascript as noted in the other answer. But I prefer pure CSS solutions.

Check here for a live fiddle.

Hope that helps.

Answer 2

I know this post is old, but it still might be useful to some people. I had a problem with an image on IE. The image had the property "max-width:100%", and it would work perfectly on Chrome, but not at all on IE.

What I simply did to the image is put a width AND a max-width. It would be something like :

 img.logo {
        width:100%;
        max-width:1600px;
    }

And it worked for me :D`

`

Answer 3

I faced a same problem with one of my project as well but couldn't find the solution as width: 100% was working but not height. So I used a little trick to wrap my page inside a div and update div's height with javascript.

windowHeight = window.innerHeight
document.getElementById("mainContainer").setAttribute('style',"height:"+windowHeight+";");

And linked that to an event.

Answer 4

In order to make it work. You have to make the parent html and the child to have the same attributes.In some cases you have to use pixels in order to make it function.

html,body, \\ this has to go to every element you want to have a height 100% 
{
  height:100%;
}

I also have something nice

window.onload=function(){
if(navigator.appName == "Microsoft Internet Explorer"){ \\ to detect if the browser used by the client is IE
winHight = window.innerHeight
document.getElementById("mainContainer").setAttribute('style',"height:"+winHeight+";");
}
}

Answer 5

I tried a few things out and this seems to be the solution:

Add the following meta-tag in the head-section of your html-document:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" >

It seems as if the IE automatically turns on the compatibility mode for (IE) Version 7. This meta-tag forces IE to set the compatibility mode to Version 10 of IE. This solution only work in IE Version 10 or higher.

Good Luck!

Answer 6

If you don't enter the height property, it will be sized proportionally to the width. style="height: 25%; width: 25%; object-fit: contain" doesn't work in IE style="width: 25%; object-fit: contain" works in IE and sized height at 25%