我有一个不断改变高度的 div。如何让第二个 div 不断采用第一个 div 的高度？答案

【问题标题】：I have a div that constantly changes height. How can I get a second div to constantly adopt the height that the first div is?我有一个不断改变高度的 div。如何让第二个 div 不断采用第一个 div 的高度？
【发布时间】：2015-04-12 10:35:52
【问题描述】：

我有一个包含项目列表的 div。用户可以从列表中添加/删除项目，因此 div 不断更改高度以补偿列表大小的变化。

我在其右侧有另一个 div，它应该提供有关左侧项目的详细信息。如何让右侧的 div 与左侧 div 保持垂直对齐并更改高度，使其等于左侧 div 当前的高度，因为从左侧 div 的列表中添加和删除项目？

【问题讨论】：

一个选项是display: table-cell : jsfiddle.net/6by4wezw
如果您不必支持旧版浏览器（IE9 及以下），请使用 flexbox。

标签： javascript jquery html css

【解决方案1】：

display:table-cell 会在这里为您提供帮助：

div { display:table-cell; border:1px solid; }

<div id=master>
  one<br>two
</div>
<div>
    three
</div>

【讨论】：

【解决方案2】：

如果不显示您的代码，很难回答您的问题。试着把它放在小提琴里？ https://jsfiddle.net/

这就是我要说的。将你的左右 div 放入容器 div 中，然后让左右 div 继承容器高度。

<div id="container" style="height:200px">
    <div style="float: left; height: 100%">
        list items<br />
        list items<br />
        list items
    </div>
    <div style="float: left; height: 100%; border: 1px solid black;">
        right div
    </div>
</div>
<br /><br />
<button onclick="document.getElementById('container').style.height='20px'" />

【讨论】：

【解决方案3】：

移除它们的高度，并在你添加高度的地方包裹一个 div。

【讨论】：

【解决方案4】：

每当文档上的某些内容发生变化时都会调用此函数，它将 div2 的高度设置为 div1 的高度值

<script type='text/javascript'>
document.onchange=setDivHeight();
function setDivHeight(){
var x=Number(document.getElementById('1').style.height)
document.getElementById('2').style.height=x;
}
</script>
<div id="1"></div>
<div id="2"></div>

【讨论】：

我真的很想尝试实施这个解决方案，但对我来说有些问题。可能是因为您编写的脚本如果放在 init.js 文件中就无法使用？ jsfiddle.net/vnt83hz7/2
@Sherri 这很奇怪。我注意到的一件事是，如果您从 x 值中删除 Number() 并仅保留元素高度，则 div 将呈现红色背景色

【解决方案5】：

弹性盒解决方案

此答案改编自 css-tricks 上的示例 - 看看

假设以下标记：

<div class="wrapper">
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </article>
  <aside class="aside">
      <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
  </ul>
 </aside>
</div>

我们可以创建一个 flexbox，它会强制所有列的高度符合具有以下样式的最大列的高度：

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  

  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;

  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.main {
  text-align: left;
  background: deepskyblue;
  order: 2;
  flex: 3 0px;
}

.aside {
    background: gold;
    max-width: 200px;
    order: 1;
}

body {
  padding: 2em; 
}

Here's a fiddle

注意：此解决方案的浏览器支持仅限于 IE10+，浏览器前缀的使用仍然适用于大多数主流浏览器版本。要更全面地了解 flexbox 的工作原理，我强烈建议您查看我在上面链接到的文章。

【讨论】：