Height:100% Not Working in Internet Explorer

Internet Explorer height: 100% not producing same result as Chrome

It seems like you are making the images a width of 10px and a height of 10px within your image tags. If you control your html you can remove these and it should work fine. If you only control the css just add width: auto; to the following:

.ubermenu .ubermenu-image:not(.ubermenu-image-lazyload) {
    height: auto;
    width: auto;
}

Div 100% height works on Firefox but not in IE

I think "works fine in Firefox" is in the Quirks mode rendering only.
In the Standard mode rendering, that might not work fine in Firefox too.

percentage depends on "containing block", instead of viewport.

CSS Specification says

The percentage is calculated with
respect to the height of the generated
box's containing block. If the height
of the containing block is not
specified explicitly (i.e., it depends
on content height), and this element
is not absolutely positioned, the
value computes to 'auto'.

#container { height: auto; }
#container #mainContentsWrapper { height: n%; }
#container #sidebarWrapper { height: n%; }

means

#container { height: auto; }
#container #mainContentsWrapper { height: auto; }
#container #sidebarWrapper { height: auto; }

To stretch to 100% height of viewport, you need to specify the height of the containing block (in this case, it's #container).
Moreover, you also need to specify the height to body and html, because initial Containing Block is "UA-dependent".

All you need is...

html, body { height:100%; }
#container { height:100%; }

Internet Explorer doesn't honor my min-height: 100% with flexbox

Here is the fix:

HTML

<body>
  <header>Header</header>
  <main>Here comes the content ...</main>
  <footer>Footer</footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header, footer {
  flex-shrink: 0;
}
main {
  flex: 1 0 auto;
}

jsfiddle: http://jsfiddle.net/d5syw3dc/

Height 100% not working in IE

It's because of this line of css in td.left:

display:inline-block;

Remove it so it stays the default: display:table-cell. Then it works in IE.

I strongly encourage you not to use tables for this sort of layout though. Here's a good tutorial that will show you how to do this using divs+css: http://learnlayout.com/

Max-height not working in Internet Explorer

Properties like min-height and max-height, when used with percentages, are applying that percentage as a percentage of the parent container. Right now, you have no parent container, so that's a problem.

Additionally, if the parent container doesn't have height set to an explicit value, using max-height with a percentage will likewise not work.

So, to use max-height: 100%; somewhere, you must also have that element's parent container's height set to an explicit value (ie 50px. Having a parent set to 50% won't work, because 50% is not explicit; it's relative).

IE 9 Div Height 100% Not Working

I ended up using a javascript hack to resize the elements to the width of their parent container. On the window resize event I attached:

$('#links li').css('height', $('#menu-bar').height());