Div 100% Height Works on Firefox But Not in Ie

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'.

so

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

100% height section work in Firefox, IE, but not in Chrome

You said that chrome is overriding your CSS right?

So use:

html,body{
  width: 100% !important;
  height: 100% !important;
}
section{
  width: 100% !important;
  height: 100% !important;
}
.section-bg{
  width: 100% !important;
  height: 100% !important;
}

To make sure that browsers will not override your CSS.

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/

height css not working in IE and firefox

So the problem is the object tag so where's the tag? And for the question you asked why you need this

html, body {
   height: 100%;
   width: 100%;
}

is because when you use height: 70%; for child element than the question arises 70% of what? So when you define height to parent in % it defines 70% of 100%

100% height div inside table-cell not working on Firefox

The trick is:

• Set row's height to 100%
• Set cell's height to 0

html,body {  height: 100%;  margin: 0;  padding: 0;}#table {  width: 100%;  display: table;  height: 100%;}#row {  display: table-row;  height: 100%;}#cell_1,#cell_2 {  display: table-cell;  height: 0;}#cell_1 {  width: 390px;  background: aliceblue;}#cell_2 {  background: yellow;}#overflown_div {  height: 100%;  overflow-y: scroll;  padding: 10px;  box-sizing: border-box;}#overflown_div p {  height: 80px;}

<div id="table">  <div id="row">    <div id="cell_1">      <div id="overflown_div">        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>      </div>    </div>    <div id="cell_2">      Blah blah blah    </div>  </div></div>