Question

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

我有一个单页设计，div可以滑入和滑出。有一个包含溢出隐藏的包装器和位置相对包含所有div。在里面，有div的位置绝对和高度自动。在每个div内部，内容div也具有高度aut，并且它们正确地扩展以适合其内容。它都连接到一个滑动的javascript。如果我将一个固定的高度设置为包装div，整个过程才有效。否则，在包装器上使用高度auto或使用javascript将包装器div设置为内部div高度（也就是高度auto）使页面不会扩展＆amp;显示任何内容。

你要考虑的第一件事是由于内部div的位置绝对值，包装div不会扩展高度。这只是问题的一部分。如果我确实将位置更改为相对位置，它将仅显示部分div。我已经尝试使用javascript设置包装器div从内部div获取位置，但那些内部div也有高度auto。我不能在内容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

使用class =“content-wrap”

在div上设置ID

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

高度自动div扩大高度

1 个答案: