Question

我希望能够根据其兄弟（div）的高度动态设置#div1（让我们称之为#div2）的高度，如果可能的话。 #div2将使用JavaScript调整大小，但如果#div1的大小可以自动更改，我会喜欢它。父div也会根据其两个孩子（#div1和#div2）的大小调整大小。

我尝试过使用CSS flexbox，并且非常接近。假设我想确保#div1是#div2高度的20％。我可以将display: flex; flex-direction: column应用于父级，提供#div2 flex-grow: 5并将flex-grow: 1提交给#div1。这很好用，几乎完全符合我的要求。

我需要一种方法来使用这个flexbox布局，但是我需要根据兄弟的大小来设置布局，而不是父级的大小。我的解决方案（https://jsfiddle.net/pg3b9n6h/1/）要求设置父级大小，而我希望父级和兄弟级都根据#div2中的大小更改进行更新。

这可能吗？

Answer 1

是的它是:)，这是如何：

function changeHeight(amount){
  const subStyle = document.querySelector('.main .sub').style;
  subStyle.height = parseInt(subStyle.height, 10) + amount + 'px';
}

.main {
  background-color: red;
  position: relative;
  width: 100px;
}
.sub {
  padding-bottom: 100%;
  background-color: green;
}
.sub2 {
  background-color: blue;
  position: absolute;
  top: 50%;
  height: 50%;
  width: 100%;
}

<button onclick='changeHeight(100)'>+100px</button>
<button onclick='changeHeight(-100)'>-100px</button>
<div class="main">
  <div class="sub" style='height: 100px'></div>
  <div class="sub2"></div>
</div>

编辑：如果有人投票给我，请解释原因，以便我可以从中学习！

Div根据兄弟姐妹的大小调整大小

1 个答案: