添加更多子元素时增加父 div 高度答案

【问题标题】：Increase parent div height when more child is added添加更多子元素时增加父 div 高度
【发布时间】：2022-02-14 11:30:04
【问题描述】：

我有一个带有多个子 div 的父 div。目前，子 div 在父 div 周围隔开，以便平等地适应父 div，它工作正常，但我想要实现的是当添加更多子 div 时，父 div 高度增加，但子 div 高度保持不变。我怎样才能做到这一点？当您添加更多子 div 时，它当前所做的是父高度保持不变，但子 div 高度会变短以适应父 div，但我想要的是相反的方式。当添加更多子 div 时，我希望父 div 的高度增加有点像具有自动高度的父 div。我怎样才能做到这一点？任何帮助表示赞赏。提前致谢。

.items {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 6%;
  left: 15%;
  width: 70%;
  height: 60%;
  background-color: gold;
}

.data {
  width: 100%;
  height: 35%;
  background-color: #187bcd;
  border-top: 2px solid #000000;
}

<div class="items">
  <div class="data">

  </div>
  <div class="data">

  </div>
  <div class="data">

  </div>
  <div class="data">

  </div>
</div>

【问题讨论】：

在这个用例中最好不要使用百分比
@mstephen19 为什么不呢？我应该改用 vh/px 吗？
如果您希望尺寸与视口高度相关，请使用vh。如果你想要一个固定的高度，你也可以使用px，不管视口的高度。

标签： javascript html jquery css

【解决方案1】：

只需从您的 .items div 中删除 % 高度，然后在您的子元素上设置一个固定高度。

<button>Add div</button>
<div class="items">
    <div class="data"></div>
    <div class="data"></div>
</div>

<style>
    .items {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        top: 6%;
        left: 15%;
        width: 70%;
        background-color: gold;
    }

    .data {
        width: 100%;
        height: 75px; /* Fixed height here */
        background-color: #187bcd;
        border-top: 2px solid #000000;
    }
</style>

<script>
    const button = document.querySelector('button');
    const div = document.querySelector('div.items');

    button.addEventListener('click', () => {
        const newDiv = document.createElement('div');
        newDiv.className = 'data';
        div.appendChild(newDiv);
    });
</script>

【讨论】：

【解决方案2】：

如果你想要的话，你可以应用一个与父母无关的长度单位（如 em 和 px）来做到这一点：

.items {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 6%;
  left: 15%;
  width: 70%;
  background-color: gold;
}

.data {
  width: 100%;
  height: 2em;
  background-color: #187bcd;
  border-top: 2px solid #000000;
}

<div class="items">
  <div class="data">

  </div>
  <div class="data">

  </div>
  <div class="data">

  </div>
  <div class="data">

  </div>
    <div class="data">

  </div>
  <div class="data">

  </div>
  <div class="data">

  </div>
  <div class="data">

  </div>
</div>

【讨论】：

是的，这就是我想要的谢谢，我会在 5 分钟内接受答案。

【解决方案3】：

min-height：（小于等于子元素的高度）

【讨论】：

" (小于等于子元素的高度)" 所以用js获取高度并应用是你的建议吗？
取决于子元素的高度是否为dynamic，但如果您已经知道子元素的高度，只需将其用作父元素的最小高度。
@说真的，你不需要 JS 来做到这一点，CSS 已经内置了 calc() 函数
@mstephen19 是的，但是如何使用 calc 来获取子元素的高度？