将一个div放置在另一个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>

​

每个page包含数据的方式与导航到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

通过将position: static;添加到“show-me”类解决了这个问题。这样，主知道它的高度是‘活动’的孩子！

当第一次导航时，活动页面类“becomes”被移除，因此它再次成为绝对位置，并开始淡出。下一页是全班的“表演-我”。现在变成静态的，所以主页面知道新页面的高度并遵循它。新的一页消失了，就像它应该有的那样！

在短时间内(据我测试，您无法看到)，主div没有内容，再次变小。如果它包含一个背景图像，你可能会看到一点闪烁，但我认为这是为了快速，所以它不应该是显而易见的。

Answer 2

为此，我将不得不推荐jQuery移动电话库。这几乎就是它建造的目的。我最近一直在使用它为我们公司制作一个自定义应用程序，它真的很不错。虽然一开始学起来有点棘手，但它并不像我以前使用过的其他库那样陡峭。

(本可以对此发表评论，但我不能:-( )