高度自动 div 扩展高度

Question

请查看：http://wixwebsite.seobrasov.com 以供参考。 我的目标是根据内容实现 body/wrapper div 高度，而不是在 500px 内容上使用 3500px 高度 body 的滚动条。

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

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

所以接下来的问题是： 即使我实现了包装 div 以将高度扩展到其包含的 div，那么该高度不是最大 div 的高度吗？因为它们都在同一个页面上？

这里有一些代码：

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

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

提前致谢，

所以我得到了这个做动画的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，它仍然没有不要做这个把戏。我会进一步研究。

谢谢！

Answer 1

在 div 上设置一个 ID 为 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";