代码之家 › 专栏 › 技术社区 › seriously

添加更多子对象时,增加父div高度

css jquery html javascript

seriously · 技术社区 · 3 年前

我有一个父div和多个子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>

3 回复 | 直到 3 年前

mstephen19 3 年前

只需将%height从屏幕上移除即可。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>

Henryc17 3 年前

如果你想要的话,你可以使用一个非亲子关系的相对长度单位(比如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>

kelvin 3 年前

最小高度:(小于或等于子元素的高度)