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

Question

我在左边有这 2 张图片，在右边有一些关于这 2 张图片的信息。唯一的问题是右边的部分不会响应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/

Answer 2

你应该这样尝试-

#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

Answer 3

rightcontent 使用页面内容的完整高度，但页面内容有一个可以使用的边距属性：

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

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

希望对你有帮助