如何将外部 div 的高度设置为始终等于特定的内部 div？答案

【问题标题】：How can you set the height of an outer div to always be equal to a particular inner div?如何将外部 div 的高度设置为始终等于特定的内部 div？
【发布时间】：2021-12-21 16:11:16
【问题描述】：

我有一个包含三个内部 div 的外部 div。

我希望最左边的内部 div 始终确定外部 div 的高度。如果其他内部 div 的内容[比最左边的 div] 少，它们将有空白空间。如果他们有更多的内容[比最左边的 div]，他们会得到一个滚动条。

关于 SO 的其他一些问题询问有关将外部 div 的高度设置为内部 div 的高度。但是，在我的情况下，我有多个内部 div，并且外部 div 的高度不会大于或小于最左侧 div 的高度。

有什么办法可以做到这一点，尤其是只使用 CSS 吗？

【问题讨论】：

这太具体了，我看不出没有 Javascript 怎么能做到，但我愿意感到惊讶。 :-) 脚本会相当简单：一个函数将 #2 和 #3 的高度设置为等于 #1，然后在加载、调整大小和内容更改时调用它。
你有multiple inner divs在单行滚动条...？
有很多选项，查看css-tricks.com/fluid-width-equal-height-columns
@Bhuwan 可能，是的。我不希望 inner-div-2 或 inner-div-3 长于 inner-div-1
大家好，我不确定我是否理解正确，检查这个fiddle，父allays将是第一个子元素的大小，第二个和第三个子元素最大为400px，然后你可以max-height

标签： html css

【解决方案1】：

一个想法是使用绝对位置从流中制作一些内容，这样它就不会对高度产生任何影响，然后使用 flexbox 进行主布局：

.container {
  display: flex;
  border: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

.container>div {
  flex: 1;
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}
div.inner {
  border-color:red;
}

.inner-alt {
  position: relative;
  overflow: auto;
}

.inner-alt>div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>

这是使用height:0;min-height:100%的另一个技巧

.container {
  display: flex;
  border: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

.container>div {
  flex: 1;
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}
div.inner {
  border-color:red;
}

.inner-alt {
  position: relative;
  overflow:auto;
}

.inner-alt>div {
  height:0;
  min-height:100%;
}

<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>

与上面相同的想法，没有额外的包装器并使用 CSS 网格：

.container {
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:10px;
  border: 1px solid;
  padding: 10px;
  box-sizing: border-box;
}

.container>div {
  border: 1px solid;
  box-sizing: border-box;
}
div.inner {
  border-color:red;
}

.inner-alt {
  overflow:auto;
  height:0;
  min-height:100%;
}

<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
  <div class="inner-alt">
    ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
 
  <div class="inner-alt">
    eget ibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  <div class="inner-alt">
    eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>

【讨论】：

太棒了！你能解释一下height:0;min-height:100%; 方法的工作原理吗？
@Alecg_O (1) height:0 将使元素不会影响其容器的高度，因此就像您有一个空的一 (1) min-height:100% 会强制元素是容器的全高，其高度由其他列定义，因为我们有一个 flexbox 布局（或 CSS 网格之一）。换句话说，我们定义了没有内容的容器的高度，然后我们使用该高度作为其内容。

【解决方案2】：

不同的方式。两个例子：

.outer_div {
  position: relative;
  overflow: hidden;
  max-width: 300px;
  margin: 0 auto;
}
.inner_div {
  width: 33.33%;
}
.inner_div_1 {
  float: left;
  background: khaki;
}
.inner_div_2,
.inner_div_3 {
  background: darkkhaki;
  position: absolute;
  top: 0;
  height: 100%;
  overflow-y: auto;
}
.inner_div_2 {
  left: 33.33%;
}
.inner_div_3 {
  left: 66.66%;
}

<div class="outer_div">
  <div class="inner_div inner_div_1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="inner_div inner_div_2">
    Lorem ipsum.
  </div>
  <div class="inner_div inner_div_3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

.outer_div {
  display: flex;
  flex-direction: row;
  max-width: 300px;
  margin: 0 auto;
  background : gray;
}
.inner_div {
  width: 33.33%;
}
.inner_div > div {
  position: relative;
  height: 100%;
}
.inner_div_1 span {
  background: khaki;
}
.inner_div_2 span,
.inner_div_3 span {
  background: darkkhaki;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

<div class="outer_div">
  <div class="inner_div inner_div_1">
    <span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </span>
  </div>
  <div class="inner_div inner_div_2">
    <div>
      <span>
        Lorem ipsum.
      </span>
    </div>
  </div>
  <div class="inner_div inner_div_3">
    <div>
      <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </span>
    </div>
  </div>
</div>

【讨论】：

但是这些解决方案依赖于你知道inner-div-3会更高的事实，所以它不是很灵活