Display divs in "〒" - html

Question

I need to display the main part of the page to cover the rest of the screen without the header.
The L and R part should be 50% of the page width (having a possible padding), and also 100% of the main height (that is, the rest of the screen)
+-----------------------+
| header |
+-----------------------+
| | |
| L | R | } main
| | |
+-----------------------+
| footer |
+-----------------------+
Here is my code jsfiddle:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: 100%;
margin:0;
padding: 10px;
/* changeable */
box-sizing:border-box;
background-clip: content-box;
}
main div {
padding: 10px;
height: 100%;
background-clip: inherit;
/* changeable */
width:30%; /* to set=50% */
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
}
<header>This is the header content.</header>
<main>
<div class="left">50% width, 100% main height left</div>
<div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>
PS.
I need to be compatible with "IE9 +" (so flexbox is not compatible)
The result at the first page load should be like in the following image:

Answer 1

Since the height of the header is known, you can use absolute positioning
header, main, footer {
position: absolute;
left: 0;
right: 0;
}
header {
top: 0;
height: 50px;
background-color: orange;
}
main {
top: 50px;
bottom: 0;
}
.left, .right {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.left {
left: 0;
background-color: yellow;
}
.right {
right: 0;
background-color: red;
}
footer {
top: 100%;
}
<header>This is the header content.</header>
<main>
<div class="left">50% width, 100% main height left</div>
<div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>

Answer 2

The issue you are having is with the padding of the div's in the main container. with a little re-factoring of your css I've managed to get it to not over lap.
Here's demo: http://jsfiddle.net/h1tz5h8q/2/
main {
background-color: green;
height: 100%;
margin:0;
padding: 1%;
}
main div {
padding: 0px;
height: 100%;
background-clip: inherit;
width:49%;
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
float: right;
}

Answer 3

Pure CSS solution, Totally responsive, Without fixing any height (header or footer)
Here's the Demo
The only downsize, is that you have to build your HTML in a certain order. (Footer comes before the columns)
<div class="Container">
<div class="Header">
<h1>Header</h1>
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Table">
<div class="Column C1">
</div>
<div class="Column C2">
</div>
<div class="Column C3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The column width may be fixed, or not.. to you're will.
P.S:
this is an old answer of mine, that have 3 columns in it, but you can change it to 2 without any problem.

Answer 4

Add your left and right sections to wrapper divs to handle the 50% width and padding.
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: 100%;
margin:0;
padding: 10px;
/* changeable */
box-sizing:border-box;
background-clip: content-box;
}
main .left, main .right {
padding: 0 10px;
height: 100%;
background-clip: inherit;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
}
.wrapper {
width: 50%;
float: left;
height: 100%;
}
footer {
display: block;
margin-top: 10px;
}
<div class="wrapper">
<div class="left">50% width, 100% main height left</div>
</div>
<div class="wrapper">
<div class="right">50% width, 100% main height right</div>
</div>

Answer 5

please try this one:
Demo
Css code:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: 100%;
margin:0;
padding: 2%;
}
main div {
padding: 0px;
height: 100%;
background-clip: inherit;
width:49%;
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
float: right;
}

Answer 6

One of the not very elegant, but functional examples I got to manage is the one using the css height: calc(100% - 50px); function for the main element:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
height: 50px;
width: 100%;
}
main {
background-color: green;
height: calc(100% - 50px);
width: 100%;
margin: 0;
float: left;
padding: 5px;
box-sizing:border-box;
background-clip: content-box;
}
main div {
padding: 10px;
height: 100%;
background-clip: content-box;
box-sizing:border-box;
width:50%;
float: left;
}
main .left {
background-color: yellow;
}
main .right {
background-color: red;
}
<header>This is the header content.</header>
<main>
<div class="left">50% width, 100% main height left</div>
<div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>
And here is the corresponding JSFiddle.
The downsize, is that I
have to use a fixed header height;
have to use twice this header (I think to solve this using LESS file instead of the CSS one...).