Javascript 高度自动div以展开高度

请检查：以供参考。 我的目标是根据内容实现body/wrapper div高度，而不是在500px内容上为3500px高度的body设置滚动条

我有一个单页设计，div滑入滑出。有一个包含所有div的包含溢出隐藏和位置相对的包装器。里面有绝对位置和自动高度的div。在每个div中都有高度为aut的内容div，它们可以正确地扩展以适合其内容。它全部连接到一个执行滑动操作的javascript。只有当我为包装器div设置了一个固定的高度时，整个过程才起作用。否则，在包装器上设置height auto或使用javascript将包装器div设置为内部div height（这也是height auto）会使页面完全不展开和显示任何内容

您首先要考虑的是，由于内部div的绝对位置，包装div不会扩展高度。这只是问题的一部分。如果我确实将位置更改为相对，它将只显示部分div。 我曾尝试使用javascript将包装器div设置为从内部div开始，但这些内部div也具有自动高度。我不能在content div上使用javascript，因为更多的javascript使用同一个类，并且具有不同的高度，因为它们根据内容进行扩展

因此，下面的问题是： 即使我实现了包装器div以将高度扩展到其包含的div，该高度不是最大div的高度吗？既然他们都在同一页上

下面是一些代码：

<div class="content-wrap">

   <div class="dhome">
      content
    </div>

    <div class="dabout">
       content
    </div>

    etc.

到目前为止，我看到的唯一解决办法是将内容放在不同的页面上，但我不认为我能做到滑动

提前感谢,

所以我得到了一个Javascript来制作动画：

function animate() {
var currentPageI = -1;
var pages = [
    $('div.dhome'),
$('div.dabout'),
];
var viewsWidth = 1300; 
var showPage = function(index){
    if(index === currentPageI){return;}
    var currentPage = pages[currentPageI];
    if(currentPage){
        currentPage.stop().animate({left: -viewsWidth})
    }
    var nextPage = pages[index];
    nextPage
        .stop()
        .css({left: viewsWidth + Math.max(0,(($(window).width() - 980)/2))})
        .animate({left: Math.max(0,(($(window).width() - 980)/2))})
        currentPageI = index;
}; 
showPage(-1);
$('a.dhome').click(showPage.bind(null, 0));
$('a.dabout').click(showPage.bind(null, 1));
$(document).ready(function () {
animate();
});

首先，我在本文末尾添加了建议的Javascript，但没有做任何事情……之后，我将其添加到动画脚本中，并使用nextPage而不是包装器childNodes，但它仍然没有做到这一点。我会进一步研究这个问题

---

谢谢大家!

使用class=“content wrap”在div上设置ID

var wrapper=document.getElementById（IDcontentwrap）；
var childNode，childNodes=wrapper.childNodes，i，l=childNodes.length；
var maxWidth=0，maxHeight=0；
对于（i=0；i可能对你有用：浮动被清除了，但是谢谢你！非常感谢你的贡献。请查看编辑后的答案，我在其中添加了我的javascript，并尝试对其进行调整，但它还没有达到目的
function animate() {
var currentPageI = -1;
var pages = [
    $('div.dhome'),
$('div.dabout'),
];
var viewsWidth = 1300; 
var showPage = function(index){
    if(index === currentPageI){return;}
    var currentPage = pages[currentPageI];
    if(currentPage){
        currentPage.stop().animate({left: -viewsWidth})
    }
    var nextPage = pages[index];
    nextPage
        .stop()
        .css({left: viewsWidth + Math.max(0,(($(window).width() - 980)/2))})
        .animate({left: Math.max(0,(($(window).width() - 980)/2))})
        currentPageI = index;
}; 
showPage(-1);
$('a.dhome').click(showPage.bind(null, 0));
$('a.dabout').click(showPage.bind(null, 1));
$(document).ready(function () {
animate();
});

var wrapper=document.getElementById(IDcontentwrap);
var childNode, childNodes=wrapper.childNodes, i, l=childNodes.length;
var maxWidth=0, maxHeight=0;
for (i=0;i<l;i++)
    {
    childNode=childNodes[i];
    if (childNode.nodeType==1) 
        {
        if (maxWidth<childNode.offsetWidth) maxWidth=childNode.offsetWidth;
        if (maxHeight<childNode.offsetHeight) maxHeight=childNode.offsetHeight;
        }
    }
wrapper.style.width=maxWidth+"px";
wrapper.style.height=maxHeight+"px";