html - 根据另一个div的高度计算一个div的位置

Question

我有两个 div 框。

CSS:

.heros {

    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    padding: 0.7%;
    border-width: 1px;
    border-color: red;
    border-style: solid;
}
#h1 {left: 32.9%; top: 10%;}

#h2 {left: 32.9%; top: 13%;}

HTML:

<div class="heros" id="h1"> </div>
<div class="heros" id="h2"> </div>

在全屏模式下，#h1 将完全位于 #h2 之上。但如果我改变显示比例，它们就会开始重叠或散开。

我希望他们停止这样做。我的想法是:

伪代码:

#h1 {left:32,9%; top: 10%;}
#h2 {left:32,9%; top: calc (10% + height of h1);}

这样的事情可能吗？也许通过使用 Javascript？

编辑:

我成功地尝试了@Alvaro 和@zgood 的解决方案。当我想扩大它并将其实现到我的元素时，我意识到使用 getElementByClass() 函数会更好

编辑 2:

更正了一些拼写错误。

编辑 3:我现在可以使用代码了。唯一的问题是，它仅在我调整浏览器窗口大小后才有效。

CSS:

<style>
* {
    background-color: #151515;
}


.h {
    align-self: center;
    width: 96%;
    height 100%;
    border-style: solid;
    border-width: 0px;
    border-color: 817B6F;

}


.heroes1 {
    display: flex;
    justify-content: center;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    padding: 0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.heroes2 {
    display: flex;
    justify-content: center;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    height: auto;
    padding: 0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}


#h1 {left: 21.5%;  border-top-left-radius: 5px;}
#h2 {left: 32.9%;}
#h3 {left: 44.3%;}
#h4 {left: 55.7%;}    
#h5 {left: 67.1%; border-top-right-radius: 5px;}
#h6 {left: 21.5%; border-bottom-left-radius: 5px;}
#h7 {left: 32.9%;}
#h8 {left: 44.3%;}
#h9 {left: 55.7%;}    
#h10{left: 67.1%; border-bottom-right-radius: 5px;}





</style>

HTML:

<div class="heroes1" id="h1">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes1" id="h2">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes1" id="h3">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes1" id="h4">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes1" id="h5">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes2" id="h6">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes2" id="h7">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes2" id="h8">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes2" id="h9">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

<div class="heroes2" id="h10">

<img class= "h" name= "Warrior" src="https://placehold.it/256" />
</div>

JS:

<script>
    var heroes1 = document.getElementsByClassName('heroes1'),
    heroes2 = document.getElementsByClassName('heroes2'),
    onResize = function() {
        for (var i = 0; i < heroes1.length; i++) {
            heroes2[i].style.top = (heroes1[i].offsetHeight + heroes1[i].getBoundingClientRect().top)
        }
    }, 
    init = (function() {
    onResize();
    window.addEventListener("resize", onResize, false);
    })();

</script>

Answer 1

使用 flex 体

.wrapper {
  display: flex;
  flex-direction: column;
  width: 10%;
  position: absolute;
  left: 32.9%;
  top: 10%;
}
.heros {
  background-color: #817B6F;
  min-height: 1em;
  margin-bottom: .2em;
  border-width: 1px;
  border-color: red;
  border-style: solid;
}

<div class="wrapper">
  <div class="heros" id="h1">
    <p>
      bla
    </p>
  </div>
  <div class="heros" id="h2"></div>
</div>