在右下角显示<div>，无位置：绝对

Question

我有<div>，如下所示

<div style="right:0px;bottom:0px;position:absolute;">

</div>

当我的移动网站以纵向模式打开时，此div在右下角正确显示。 但是，在横向模式下打开时，它会显示在角落并与已存在的元素重叠。

我希望这个div位于页面右下角所有元素的底部。我该怎么做？

Answer 1

我建议使用flexbox - 但它可能需要重新组织一下你的css代码

＆＃13;

＆＃13;

.page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height:100vh;
}

.element {
  height: 10px;
  width: 80%;
  border: 1px solid #000;
  padding: 20px 0;
}

.element.bottom {
  margin-top: auto;
  background: red;
}

＆＃13;

<div class="page">
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element bottom">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;