Html 将一个div放置在另一个div上，不带位置：绝对或相对，高度和宽度可变

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

setTimeout（函数（）{
$（'page-1'）.removeClass（“show me”）；
$（“#第2页”）.addClass（“演示”）；
}, 1000);
setTimeout（函数（）{
$（“#第2页”）.removeClass（“show me”）；
$（“#第3页”）.addClass（“演示”）；
}, 2000);
div#main{
位置：绝对位置；
最小宽度：300px；
宽度：100%；
身高：100%；
背景色：#ffa；
}
div#main>div{
位置：绝对位置；
排名：0；
左：0；
不透明度：0；
可见性：隐藏；
转换延迟：0s；
过渡时间：200ms；
过渡属性：“不透明度，可见性”；
过渡时间功能：轻松；
}
#第1页{
背景色：#00f；
}
#第2页{
背景色：#0f0；
}
#第3页{
背景色：#f00；
}
div#main>div.show-me{
不透明度：1；
能见度：可见；
}

第1页
第2页
第3页
我必须为此推荐库。它几乎就是为它而建的。我最近一直在用它为我们公司制作一个定制应用程序，它真的很不错。虽然一开始有点棘手，但它不像我过去使用过的其他一些库那样是一条陡峭的学习曲线

（本应对此进行评论，但我不能：-（）
通过将
位置：static；
添加到“show me”类解决了问题。
通过这种方式，主体知道它的“活跃”孩子的高度

第一次导航时，活动页面类“show me”被删除，因此它再次成为绝对位置，并开始淡出。
下一页将显示“show me”类。
现在变为静态，因此main知道新页面的高度并跟随它。
新的一页应该会消失的

一小会儿（就我测试的情况而言，你看不到）主div没有内容，又变小了。如果它包含一个背景图像，你可能会看到一点闪烁，但我认为它太快了，所以不应该被注意到。
你目前正在使用JavaScript或jQuery创建页面之间的转换吗？如果是，我建议使用它们来更改“主”的高度根据内容div高度计算div。是的，这很有效，但我想知道是否有一种方法可以不用js。同样的方法，你可以使用margin:0 auto；将页面放在中间，而不是使用js计算其位置。我认为CSS是定位div内容的最佳解决方案。使用“绝对”定位也是我的选择。但是如果你不给“主”指定一个高度div，它应该对其中内容的大小做出反应。但是如果你需要为它指定一个高度，然后根据内容动态更改该高度，那么我认为JS是你唯一的解决方案。你可以提供完整的HTML和CSS，或者把它放在一个小提琴中，以便我们可以为你操作它吗？是的，我需要一些时间将其从应用程序中取出很难。一秒钟；）我到底应该用图书馆什么？哪些API方法？使用页面容器：您可以通过应用程序转换页面，同时维护页眉和页脚信息。它是完全可主题化的，并且只依赖于jquery库。您可以下载min.js文件的本地副本，也可以通过托管服务器链接到它们。而且，所有的东西都是通过lib聚焦到视口的，只需要在这里和那里进行调整就可以了。我希望我能帮助你得出这个结论。请投票选出任何有助于你回答这个问题的答案，或者澄清你是如何找到答案的，以便将来的读者也能看到你是如何做到这一点的。谢谢你的帮助！你确实让我更好地看待我的问题，但是让我想到答案的人出于某种原因删除了它的评论。。。它在你的下面：“也看看这个问题……”我评论道：“是的。。。我有点害怕……”