如何使静态 div 与动态 div 具有相同的高度？

Question

我有这个div:

<div class="middle"></div>

它每天充满 API 数据，它的高度每天都在变化。

我还有这些 divs:

<div id="right" class="sideScoreDiv"></div>
<div id="left" class="sideScoreDiv"></div>

我想让这些div等于中间div的高度，我该怎么做？我试过将高度设置为 100%，但这对我不起作用。我还尝试了其他建议的方法，例如隐藏溢出，但在动态创建的 divs.

上找不到任何内容

Answer 1

我想你在找 grid or flex 伙计。

Answer 2

这个问题的一个很好的解决方案是网格布局。例如，在下面的代码片段中，元素被插入到父级的第一个子级中，第二个 div 的高度更改为匹配。

<div class="parent-container">
   <div id="left">
      left
   </div>

   <div id="content">
      <!-- for example, fill it with a list -->
      <!-- this data can be anything though -->
      <ul></ul>
   </div>

   <div id="right">
      right
   </div>
</div>

<style>
   .parent-container {
      background-color: rebeccapurple;
      display: grid;

      /* adjust these columns to change widths */
      grid-template-columns: 10rem auto 10rem;
   }

   /* just to make things look a bit nicer */
   #left, #right {
      padding: 1rem;
      background-color: paleturquoise;
   }
</style>


<!-- script to simulate dynamic data -->
<script>
   setInterval(() => {
      const parent = document.querySelector('ul');
      const entry = document.createElement('li');
      entry.innerText = 'data';
      parent.appendChild(entry);
   }, 1000);
</script>

如何使静态 div 与动态 div 具有相同的高度？

How to make a static div the same height as a dynamic div?

html

javascript

css