两个 div 并排，相等的高度由一个 [重复]

Posted 2023-03-05

【中文标题】两个 div 并排，相等的高度由一个 [重复]

【英文标题】：Two divs side-by-side, equal height governed by one [duplicate]

【发布时间】：2017-03-18 21:37:14

【问题描述】：

给定以下标记：

<div class="wrapper">
  <div id="one">
    Some content
  </div>
  <div id="two">
    Some content
  </div>
</div>

使两个 div 具有相同高度的最简单方法是什么，即 #two 的计算高度（具体来说，高度自动但遵循 min-height）？所以，如果#two 比#one 长，#one 应该扩展以匹配；如果#two 更短，#one 应该被切断（并根据其overflow 设置溢出）。

我想 flexbox 可能是我的救星（经常这样），但我不知道怎么做。

【问题讨论】：

啊哈，谢谢。第一个标记的副本不是（它主要覆盖了与最大值匹配的通常等高）；但第二个骗局是完全匹配的。谢谢！

【参考方案1】：

假设我理解正确。

我个人喜欢根据需要使用溢出的填充底部。在为响应式在线设计师添加 div 图层时，我经常使用这种方法，并且需要按百分比限制所有尺寸。

.wrapper display: flex; padding-bottom: 56.25%; overflow: hidden
#one background:green
#two background:yellow;

<div class="wrapper">
  <div id="one">
    Some content<br>
    Some content<br>
    Some content<br>
    Some content<br>
</div>
  <div id="two">
    Some content
  </div>
</div>

【参考方案2】：

使用 flexbox 很容易：

使用列布局，使高度成为主要尺寸 在第一个元素之后强制换行，以便弹性项目并排显示 设置flex-basis: 0px，让它最初没有高度，然后让它增长到用flex-grow: 1填满可用空间。 使用一些不同于可见的overflow。或者，如果您希望内容溢出，请使用min-height: 0。

.wrapper 
  display: flex;
  flex-flow: column wrap;
  margin: 10px;

.one 
  flex: 1 1 0px;
  page-break-after: always;
  break-after: always;
  overflow: auto;

.one, .two 
  border: 1px solid;
  width: 50%;

<div class="wrapper">
  <div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>
<div class="wrapper">
  <div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper, consectetur porta diam dapibus. Donec nibh nunc, imperdiet ut sollicitudin quis, auctor at nisl. Maecenas vel diam ligula. Pellentesque facilisis diam et est consectetur, et tristique nisl tincidunt. In et nibh in lorem commodo luctus. Maecenas vitae justo eget risus facilisis placerat. Vivamus sagittis hendrerit nibh, at sagittis enim cursus vel. Donec non est lectus. Maecenas augue erat, mollis eget volutpat eu, tincidunt sit amet nisl. Aenean lacinia justo ipsum, non porta felis interdum id. Pellentesque quis lectus molestie, viverra quam ac, congue purus.</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>

但是，强制换行符并未得到广泛支持。所以你也可以试试好的旧表：

向第一个单元格添加内部包装 使其绝对定位。由于绝对定位的元素是不流动的，因此它们的内容对容器的高度没有影响。 让它用top、right、bottom、left完全填充相对定位的单元格。

.wrapper 
  display: table;
  width: 80%;
  table-layout: fixed;
  margin: 10px;

.one, .two 
  display: table-cell;
  position: relative;
  border: 1px solid;

.one-inner 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;

<div class="wrapper">
  <div class="one">
    <div class="one-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>
<div class="wrapper">
  <div class="one">
    <div class="one-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper, consectetur porta diam dapibus. Donec nibh nunc, imperdiet ut sollicitudin quis, auctor at nisl. Maecenas vel diam ligula. Pellentesque facilisis diam et est consectetur, et tristique nisl tincidunt. In et nibh in lorem commodo luctus. Maecenas vitae justo eget risus facilisis placerat. Vivamus sagittis hendrerit nibh, at sagittis enim cursus vel. Donec non est lectus. Maecenas augue erat, mollis eget volutpat eu, tincidunt sit amet nisl. Aenean lacinia justo ipsum, non porta felis interdum id. Pellentesque quis lectus molestie, viverra quam ac, congue purus.</div>
  </div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div>
</div>

【参考方案3】：

如果第一个容器有一个绝对子容器，它将带走文档流，并且它将始终由第二个 flex 子容器的高度控制。如果您将#two 的内容更改为更多，您会看到它正确增长。看这里：

演示：http://codepen.io/anon/pen/NbWmdB

html:

<div class="wrapper">
  <div id="one">
    <div class="one-inner">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
  <div id="two">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. amet.
  </div>
</div>

css:

.wrapper 
  display:flex


#one 
  background:red;
  position:relative;
  flex:1;
  overflow:auto


.one-inner 
  position:absolute;




#two 
  background:green;
  flex:1;

希望对你有帮助