两个绝对 Div 顶部和底部

Question

我有两个绝对的 div..我希望 div1 在上面，div2 在它下面..div1 的大小可能会根据其中的数据而改变，我希望 div2 能够去相应地使用 div1。

<div class="div1"></div>
<div class="div2"></div>

这是我为 div1 设置的样式：

.div1{
 list-style-type: none;
 text-align: center;
 width:55%;
 position: absolute;
 top:0;
 left:0;
}

如何根据 div1 的大小将其放在 div2 位于 div1 下方的位置并保持在其下方？

.div2{
 width:55%;
 position:absolute;
 left:0;
}

如果需要涉及javascript，请只给出javascript..而不是jquery.

Answer 1

您可以像这样利用第一个 div 元素的 offsetHeight：

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

console.log(div1.offsetHeight);

div2.style.top = div1.offsetHeight + 'px';

.wrapper {
  position: relative;
  height: 100%;
}

.div1{
 height: 50px;
 border: 1px solid green;
 text-align: center;
 width:55%;
 position: absolute;
 top:0;
 left:0;
}
.div2{
 width:55%;
 position:absolute;
 left:0;
 height: 50px;
 border: 1px solid green;
}

<div class="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>

Answer 2

将 position: absolute 设置为父级：

<div class='div'>
  <div class='div1'></div>
  <div class='div2'></div>
</div>

和 css:

.div {
  width: 55%;
  position: absolute;
  left: 0;
}

div1 { ... }
div2 { ... }

两个绝对 Div 顶部和底部

Two Absolute Divs Top and Bottom

html

javascript

css

css-position

absolute