Inherited resthight of parent container - html

Question

I get a flexible count of elements out of a database and put them into a list.
There is a container below the list. This container should take the rest height of the parent container.
On the code below you can see my current result. the Div in #rightContent should take the complete rest height. But i dont know how.
Html:
<section>
<aside>
I'm a sidebar!
</aside>
<main>
<article id="leftContent">
<img src="http://fs1.directupload.net/images/150422/6x5qv8ik.png">
</article>
<article id="rightContent">
<h1>Headline</h1>
<hr>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<div>
<p>
a lot of text
</p>
</div>
</article>
</main>
</section>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 100%;
}
section aside {
position: fixed;
right: 50px;
width: 150px;
background-color: firebrick;
color: white;
padding: 25px;
height: 100%;
}
section main {
position: relative;
margin-right: 250px;
left: 0;
display: block;
width: auto;
border: 1px solid yellow;
}
section #leftContent {
position: relative;
display: block;
border: 1px solid green;
padding: 0;
margin: 0;
height: auto;
width: 50%;
}
section #leftContent img {
width: 100%;
height: auto;
display: block;
}
section #rightContent {
position: absolute;
display: inline-block;
border: 1px solid blue;
right: 0;
margin-left: 50%;
width: 49%;
height: 100%;
top: 0;
}
section #rightContent div {
border: 1px solid violet;
position: relative;
margin-bottom: 0;
}
http://jsfiddle.net/kzkpLg11/
This image shows what i want.

Answer 1

You could do it like this: http://jsfiddle.net/kzkpLg11/1/
Involves a few extra elements but the browser support will be ok. It's basically all about this piece of CSS. But I suggest you have a look at the fiddle.
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
You could also solve this problem with Flexbox. But that might be a little trickier.