html - 将 body floater 的最小高度调整为包含多个 div 的导航 floorer

Question

代码和Codepen :

.wrapper1 {
    overflow: hidden;
    width: 700px;
    border: 1px solid #000000;
    padding: 20px;
}
.wrapper2 {
    float: left;
    width: 150px;
}
.content1 {
    width: 100px;
    border: 1px solid #000000;
    margin-bottom: 20px;
    padding: 10px;
    background-color:#ffffff;
}
.content2 {
    float: right;
    width: 500px;
    border: 1px solid #000000;
    margin-bottom: 20px;
    padding: 10px;
    background-color:#ffffff;
}
.content2, .wrapper2 {
    margin-bottom: -500em;
    padding-bottom: 500em;
}
.wrapper3 {
    clear: both;
}

<div class="wrapper1">

<div class="wrapper2">
<div class="content1">
text
</div>
<div class="content1">
text
</div>
</div>

<div class="content2">
text
</div>
</div>
<div class="wrapper3"></div>

我想让 content2 至少与 wrapper2 的高度相同，wrapper2 的高度随内容而变化。尝试添加和减去填充和边距，但最终 content2 延伸到 wrapper1 的底部。我希望 content2 在第二个 content1 框的底部结束。

Answer 1

您可以使用 flex 来做到这一点。默认情况下，flex 父级的子级将显示在一行中并拉伸(stretch)以填充父级的高度。

.wrapper1 {
	width: 700px;
	border: 1px solid #000000;
	padding: 20px;
  display: flex;
}
.wrapper2 {
	width: 150px;
}
.content1 {
	width: 100px;
	border: 1px solid #000000;
	margin-bottom: 20px;
	padding: 10px;
	background-color:#ffffff;
}
.content2 {
	width: 500px;
	border: 1px solid #000000;
	margin-bottom: 20px;
	padding: 10px;
	background-color:#ffffff;
}

<div class="wrapper1">
<div class="wrapper2">
<div class="content1">
Lorem ipsum dolor sit amet, duo magna persius an.
</div>
<div class="content1">
Lorem ipsum dolor sit amet, duo magna persius an.
</div>
</div>
<div class="content2">
Lorem ipsum dolor sit amet, duo magna persius an. Cu adhuc iusto vel, sed ei vidit inciderint. Mel at duis quidam incorrupte, autem omnium ne mei. Ferri iudicabit et eos. Mei ex detraxit atomorum evertitur.
</div>
</div>