Child div won't expand to full height of parent div

Question

I have these 2 images on the left and some information about the 2 images on the right. Only problem is that the section on the right won't respons to height:100%;. So what I want is to have the lightblue section expand to the bottom of the grey area. Can anybody tell me what I'm doing wrong?

I don't want to work with positions. I've tried that approach but that made the rest of the page a lot worse.

JSFiddle

#main{
	float:left;
	width:100%;
	padding:75px 0 55px 0;
    background-color:#999;
}

.contentpage img{
	display:block;
	margin-bottom:40px;
}

#leftsection{
	width:50%;
	float:left;
}

#leftcontent{
	width:480px;
	float:right;
}

#leftcontent img{
	background:red;
    height:453px;
    width:453px;
}

#rightsection{
	width: -moz-calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: calc(50% - 150px);
	margin:-75px 0 0 150px;
	padding-bottom:20px;
	height:100%;
	float:left;
	background-color:#f3f5f7;
}

#rightsection > #rightcontent{
	padding:85px 0 20px 35px;
	max-width:330px;
}

#rightcontent{
	width:auto;
	float:left;
}

<div id="main" class="contentpage">
    <div id="leftsection">
        <div id="leftcontent">
            <div id="breadcrumbs">Bread / crumbs</div>
			<img src="images/afbeelding1.png"/>
			<img src="images/afbeelding2.png"/>
		</div>
	</div>
    <div id="rightsection">
		<div id="rightcontent">
			<h1>Title</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet.</p>
					
			<h2>Thins:</h2>
			<ul>
			    <li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
			</ul>
		</div>
	</div>
</div>

Answer 1

You can use display: table and display: table-cell

You can see a similar question: height: 100% for inside with display: table-cell

#main{
    width:100%;
    background-color:#999;
    display: table;
}

.contentpage img{
    display:block;
}

#leftsection{
    width:50%;
    display: table-cell;
}

#leftcontent{
    width:480px;  
}

#leftcontent img{
    background:red;
    height:453px;
    width:453px;
}

#rightsection{
    width: -moz-calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: calc(50% - 150px);
    height:100%;
    background-color:#f3f5f7;
    display: table-cell;
}

#rightsection > #rightcontent{
    max-width:330px;
}

#rightcontent{
    width:auto;
}

https://jsfiddle.net/sdkjknrq/3/

Answer 2

The rightcontent use the full height of your pagecontent, but the pagecontent have a margin property you can use :

#main{
  float:left;
  width:100%;
  padding:75px 0 0 0; 
  background-color:#999;
}

The relevant change is : padding:75px 0 0 0;

I hope it may help

Answer 3

You should try like this-

#main{
	float:left;
	width:100%;
	padding:75px 0 55px 0;
    background-color:#999;
    position: relative;
}

.contentpage img{
	display:block;
	margin-bottom:40px;
}

#leftsection{
	width:50%;
	float:left;
}

#leftcontent{
	width:480px;
	float:right;
}

#leftcontent img{
	background:red;
    height:453px;
    width:453px;
}

#rightsection{
	width: -moz-calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: calc(50% - 150px);
	margin:-75px 0 0 150px;
	padding-bottom:20px;
	height:100%;
	float:left;
	background-color:#f3f5f7;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

#rightsection > #rightcontent{
	padding:85px 0 20px 35px;
	max-width:330px;
}

#rightcontent{
	width:auto;
	float:left;
}

<div id="main" class="contentpage">
    <div id="leftsection">
        <div id="leftcontent">
            <div id="breadcrumbs">Bread / crumbs</div>
			<img src="images/afbeelding1.png"/>
			<img src="images/afbeelding2.png"/>
		</div>
	</div>
    <div id="rightsection">
		<div id="rightcontent">
			<h1>Title</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet.</p>
					
			<h2>Thins:</h2>
			<ul>
			    <li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
			</ul>
		</div>
	</div>
</div>

LINK