Как рассчитать высоту между самой верхней частью div и нижней частью: 0

Question

Я хочу иметь возможность разместить div сверху под другим div. В примере на изображении у меня есть два div s. Первая помечается с right: 10px; и bottom: 10px;. Я хочу иметь возможность позиционировать второй div таким же образом, но чтобы bottom был 10px выше, чем самый верх первого div. Чтобы сделать это динамически, мне нужно иметь разницу в высоте между самой вершиной первого div и bottom: 0.

Как я могу получить это с помощью JavaScript или JQuery?

 Это первый div  Это второй div  

.div1 {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-block;
    padding: 10px;
    background-color: #990;
}
.div2 {
    display: inline-block;
    padding: 10px;
    background-color: #099;
    //position: absolute;
    //right: 10px;
    //bottom: ...;
}

Answer 1

Вы можете использовать display: flex вместе с flex-direction: column-reverse. А для промежутка в 10 пикселей вы можете использовать margin-bottom:10px для всех div.

См. Фрагмент ниже:

.main{
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-block;
  display: flex;
  align-items: flex-end;
  flex-direction: column-reverse;
  
}
.div{
    padding: 10px;
    margin-bottom: 10px;
}
.div:first-child{
  margin-bottom: 0;
}
.div1 {
    background-color: #990;
}
.div2 {
    background-color: #099;   
}
.div3 {
    background-color: #909;   
}

<div class="main">
  <div class="div div1">This is the first div</div>
  <div class="div div2">This is the second div</div>
  <div class="div div3">This is the third div</div>
</div>

Вы также можете протестировать здесь

Answer 2

В js перейдите к этому первому div offsetHeight и добавьте к нему 10 пикселей. Вы получаете высоту для второго div.

el.offsetHeight + 10;

В jQuery, $ (el) .getBoundingClientRect () дает высоту элемента.

Answer 3

В JavaScript вы можете использовать clientHeight, чтобы получить высоту div1, добавить к нему любое число, которое вы хотите, и установить его как переменную, которую вы можете использовать для стилизации позиции bottom вашего div2.

Также рекомендуется добавить box-sizing: border-box к CSS, чтобы избежать ошибок случайного позиционирования / определения размера.

const div1 = document.querySelector(".div1");
const div2 = document.querySelector(".div2");

// Here we are creating the new 'position' variable //
let position = div1.clientHeight + 20;

// Here we are styling div2's bottom position with the above variable.//
// You can use whatever unit you want from here.//
div2.style.bottom = position + "px";

* {
  box-sizing: border-box;
}

.div1 {
  display: inline-block;
  position: absolute;
  padding: 10px;
  bottom: 10px;
  right: 10px;
  background-color: #990;
}
.div2 {
  display: inline-block;
  position: absolute;
  padding: 10px;
  right: 10px;
  background-color: #099;
}

  <div class="div1">
    <p>Div 1</p>
  </div>
  <div class="div2">
    <p>Div 2</p>
  </div>