自动显示HTML页面的底部而不是顶部

Question

我想向用户展示加载网站的用户是页面的底部，而不是通常的顶部。

更具体的示例：我有一个iframe元素，该元素指向带有一些文本的网站。该网站的底部应自动显示。

我怎么能意识到这一点？

Answer 1

使用flex及其flex-direction: column-reverse;

html, body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column-reverse;
  max-height: 100vh;
  overflow: auto;
}

<div class="wrapper">
  Top<br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Long content <br><br><br>
  Bottom
</div>

边注：

该解决方案似乎仍然存在一些缺陷，这些缺陷在Firefox / Edge / IE11中无法正常工作（尽管内容从底部开始，但它们没有显示滚动条），因此这里是针对它们的修复方法，直到它们开始表现出来

下面的代码段是从我的另一个答案中获取的，并在本文中将其清除了，那里还有更多选项可以解决此问题。

/* fix for IE/Edge/Firefox */
var isWebkit = ('WebkitAppearance' in document.documentElement.style);
var isEdge = ('-ms-accelerator' in document.documentElement.style);
function updateScroll(el){
  el.scrollTop = el.scrollHeight;
}
if (!isWebkit || isEdge) {
  updateScroll(document.querySelector('.content'));
}

html, body {
  margin:0;
}
.wrapper {
  display: flex;
  flex-direction: column-reverse;
  max-height: 100vh;
  overflow: auto;  
}

/* fix for hidden scrollbar in IE/Edge/Firefox */
.content { overflow: auto; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .content { overflow: visible; }
  @supports (-ms-accelerator:true) { .content { overflow: auto; } }
}

<div class="wrapper">
  <div class="content">
    Top<br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Long content <br><br><br>
    Bottom
  </div>
</div>