After retrieving a dynamic number of elements from a database, I populate them into a list.
Below the list, there is a container that should fill up the remaining height of its parent container.
In the code snippet below, you can see my current layout. The div in #rightContent should occupy the entire remaining height, but I'm unsure how to achieve this.
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;
}
The image provided illustrates the desired layout.