html - 子 div 不会扩展到父 div 的全高

Question

我在左边有这两张图片，右边有关于这两张图片的一些信息。唯一的问题是右侧的部分不会响应 height:100%;。所以我想要的是让浅蓝色部分扩展到灰色区域的底部。谁能告诉我我做错了什么？

我不想处理职位。我已经尝试过这种方法，但这使页面的其余部分变得更糟。

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

您可以使用 display: table 和 display: table-cell

可以看到类似的问题: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/