如何用CSS推下绝对定位的div

Question

我有一个包含顶部区域和底部区域的容器。顶部区域包含两个额外的div（稍后）将包含动态内容。底部是绝对定位的div，总是应该放在底部，无论顶部包含多少内容，底部都应该向下推。由于某些原因，我不知道，它失败了。有人可以帮助我吗？

我的HTML看起来像这样：

<div class="container">
  <div class="top">
    <div class="left">
      <h3>
        some left header
      </h3>
      <p>
       some left text
      </p>
    </div>
   <div class="right">
    <h3>
      some right header
    </h3>
    <p>
      some right text
    </p>
    <p>
      some right text
    </p>
  </div>
 </div>
 <div class="bottom">
  <p>
    some bottom text
  </p>
  <p>
    more bottom text
  </p>
</div>

和我的CSS：

.container {
  position: relative;
  border: 1px solid black;
  min-height: 255px
}

.top {
  display: flex;
  border: 1px solid black;
 }

.left {
  float: left;
  border: 1px solid red;
 }
.right {
  float: right;
  border: 1px solid green;
}
.bottom {
  position: absolute; // here the issue appears
  bottom: 0;          // here too
}

我有一个JSFiddle它应该是什么样子或我想要实现的目标

此外，我有一个JSFiddle它的位置绝对div。

Answer 1

如何将值为100vh的height属性添加到容器中。

height: 100vh;

Answer 2

如果您从position: relative;移除.container，则绝对定位元素将保留在底部。