如何使用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 ，绝对定位的元素将保留在底部。