html - 将一个 div 放在另一个没有位置 : absolute or relative and variable height and width 的 div 上

Question

我正在制作一个使用网站作为界面的应用程序。
html 如下所示:

setTimeout(function() {
  $('#page-1').removeClass("show-me");
  $('#page-2').addClass("show-me");
}, 1000);


setTimeout(function() {
  $('#page-2').removeClass("show-me");
  $('#page-3').addClass("show-me");
}, 2000);

div#main {
  position: absolute;
  min-width: 300px;
  width: 100%;
  height: 100%;
  background-color: #ffa;
}
div#main > div {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
  transition-duration: 200ms;
  transition-property: "opacity,visibility";
  transition-timing-function: ease;
}
#page-1 {
  background-color: #00f;
}
#page-2 {
  background-color: #0f0;
}
#page-3 {
  background-color: #f00;
}
div#main > div.show-me {
  opacity: 1;
  visibility: visible;
}

<div id="main">
  <div id="page-1" class="show-me">Page 1</div>
  <div id="page-2">Page 2</div>
  <div id="page-3">Page 3</div>
</div>

每个页面包含数据的方式与您导航到www.example.com/page-1、www.example.com/page- 2 或 www.example.com/page-3。

但是我想停留在 www.example.com 并通过淡入淡出浏览页面。我用 position: absolute;top:0;left:0; 把它们放在一起，但是这样 main 就不知道 page 的高度 因为它的内容是绝对的。

因此我想要一种方法来使它们淡入和淡出而无需使用 position 或负边距(因为每个页面的高度因内容而异)

或者您有其他方法可以达到这种效果？

这是一个应用程序，而不是一个应该被谷歌或其他东西索引的网页。所以不用担心 SEO :)

编辑:添加了一个更好的示例。

Answer 1

我不得不推荐jQuery Mobile为此的图书馆。这几乎就是它的用途。我最近一直在使用它为我们公司制作自定义应用程序，它确实非常好。虽然一开始有点棘手，但它不像我过去使用过的其他一些库那样陡峭的学习曲线。

(本可以将其作为评论，但我不能 :-( )