Javascript 我有一个不断改变高度的潜水器。如何让第二个div始终采用第一个div的高度？

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

---

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

如果不显示代码，很难回答您的问题。试着把它放在小提琴里

这是我要说的。将左、右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'" />

列出项目

列出项目

清单项目
右分区

从这两个文件中删除高度，并在添加高度的位置在这两个文件周围加上一个div。

每当文档中的内容发生变化时，就会调用此函数，并将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>

document.onchange=setDivHeight（）；
函数setDivHeight（）{
var x=编号（document.getElementById（'1'）.style.height）
document.getElementById（'2'）.style.height=x；
}

显示：表格单元格

将帮助您：

div{显示：表格单元格；边框：1px实体；}

一个
两个
三

Flexbox解决方案

这个答案是根据一个例子改编的-看看吧

假设以下标记：

<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>

---

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

一个选项是

display:table cell

：如果您不必支持传统浏览器（IE9及以下版本），那么就使用flexbox。我真的很想尝试实现这个解决方案，但有些东西对我来说是不可靠的。可能是因为您编写的脚本在init.js文件中无法使用@雪莉：真奇怪。我注意到的一点是，如果从x值中删除Number（），只保留元素高度，div将采用红色背景色

.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; 
}