儿童div不会扩展到父div的全高

Question

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

我不想与职位合作。我尝试过这种方法，但这使得页面的其余部分更糟糕。

JSFiddle

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/

Answer 2

你应该尝试这样 -

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强> LINK

Answer 3

rightcontent使用pagecontent的完整高度，但pagecontent有一个您可以使用的margin属性：

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

相关更改为：padding:75px 0 0 0;

我希望它可以提供帮助