在右下角显示一个 <div> 没有位置：absolute答案

【问题标题】：Show a <div> at bottom right corner without position: absolute在右下角显示一个 <div> 没有位置：absolute
【发布时间】：2017-12-11 14:39:21
【问题描述】：

我有一个<div>，如下所示

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

</div>

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

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

【问题讨论】：

你能画一个插图来说明你的 div 的当前显示以及应该如何显示吗？
这个问题很模糊，而且自相矛盾。它应该始终可以访问（浮动在顶部）还是仅在用户滚动到底部时访问？还有什么是正确的？
使用position:fixed
@DeepakYadav — 如何阻止它重叠？
我认为这是stackoverflow.com/questions/13348965/…的副本，但问题并不完全清楚。

标签： javascript html css mobile

【解决方案1】：

我建议使用 flexbox - 但它可能需要重新组织一些 CSS 代码

.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;
}

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

【讨论】：