高度自动div扩展高度

Question

Please check: http://wixwebsite.seobrasov.com for reference. My goal here is to achieve a body/wrapper div height according to the content instead of having a scrollbar for a 3500px height body on a 500px content.

I have a one page design with divs sliding in and out. There is a wrapper with overflow hidden and position relative that contains all the divs. Inside that, there are the divs having position absolute and height auto. Inside each div there are the content divs with height aut as well and they correctly expand to fit their content. It is all connected to a javascript that does the sliding. The whole thing only works if I set a fixed height to the wrapper div. Otherwise, having height auto on the wrapper or using javascript to set the wrapper div to the inner div height (which is height auto as well) makes the page not to expand & show any content AT ALL.

The first thing you would think about would be that the wrapper div does not expand height due to position absolute of the inner divs. That is only part of the problem. If I do indeed change the position to relative, it will only show part of the divs. I have tried using javascript to set the wrapper div to take position from inner divs, but those inner divs also have height auto. And I cannot do the javascript on the content divs as there are more using the same class and having different heights, as they expand depending on content.

So the question that follows is: Even if I achieve the wrapper div to expand height to its containing divs, wouldn't that height be the height of the biggest div? Since they are all on the same page?

Here is some code:

<div class="content-wrap">

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

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

    etc.

.content-wrap{
overflow:hidden;
position:relative;
clear:both;
height: 3500px -> aiming for auto
}

.dhome,.dabout{
position:absolute;
right:-200%;
height:auto;
}

So far the only solution I'm seeing to this would be to place the content on different pages but I don't think that I'll manage to do the sliding.

Thanks in advance,

So I got this Javascript that does the animation:

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();
});

First of all I have added the suggested Javascript at the end of this one and didn't do anything...after that I have added it into the animation script and used nextPage instead of the wrapper childNodes, and it still didn't do the trick. I will further look into this.

Thank you!

Answer 1

set an ID on the div with class="content-wrap"

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";