如果前一个 div 的高度不同，如何让我的第二个 div 转到页面边缘？

Question

我知道如何使用位置进入页面边缘的第一个div：absolute;但是我不知道该如何使后续Divs进入边缘，因为DIV上方的高度会根据用户的浏览器的宽度而有所不同。

<div style="position: absolute; top: 0px; left: 0px; background-color: #333; height: 200px; width: 100%;">
  This div is exactly 200px tall, so I know that the position top value of my next div is going to be 200px.
</div>
<div style="position: absolute; top: 200px; left: 0px; background-color: #FBD2D7; width: 100%; padding: 50px; font-size: 2vw;">
  I only want this section to be as tall as it needs to be to fit the text. Where it ends will vary based on how wide the viewer's browser is.
</div>
<div style="position: absolute; left: 0px; background-color: #93B6C7; height: 200px; width: 100%;">
  I don't know how to position this div because where the previous div ends will vary.
</div>

Answer 1

欢迎来到堆栈溢出！只是现在编辑我的答案，因为您继续添加了代码，最初我抱怨！

这是一个看起来与您提供的代码相似的解决方案。关键是将所有三个div放在一个绝对位置的div中

中

#container {
  position: absolute;
  right:0px;
  left: 140px;
}
#variable {
  background: lightblue;
}
.set {
  height: 30px;
  background: red;
}

<div id="container">
<div class="set"></div>
<div id="variable">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisl ligula, tempor vitae porttitor vel, ornare at dolor. Cras faucibus metus eget risus efficitur fermentum. Praesent laoreet sodales elementum. Maecenas dapibus elit urna, eget eleifend mauris ultricies at. Mauris sed risus ut est accumsan maximus sit amet ut augue. Quisque dapibus nisi ut mi semper porttitor. Praesent id venenatis lectus. Etiam nec facilisis metus.</div>
<div class="set"></div>
</div>

Answer 2

您可以给他们一个父母和位置，而所有孩子都会正常流动

<div style="position: absolute; top: 0px; left: 0px;">
  <div style="background-color: #333; height: 200px; width: 100%;">This div is exactly 200px tall, so I know that the position top value of my next div is going to be 200px.</div>
  <div style="background-color: #FBD2D7; width: 100%; padding: 50px; font-size: 2vw;">I only want this section to be as tall as it needs to be to fit the text. Where it ends will vary based on how wide the viewer's browser is.</div>
  <div style="background-color: #93B6C7; height: 200px; width: 100%;">I don't know how to position this div because where the previous div ends will vary.</div>
</div>