高度自动上升，以扩大高度

请检查：http://wixwebsite.seobrasov.com作为参考。这里我的目标是根据内容实现body/wrapper div高度，而不是在500px内容上为3500px高度的主体设置滚动条。高度自动上升，以扩大高度

我有一个页面设计divs滑入和滑出。有一个包含所有div的溢出隐藏和相对位置的包装。里面，有位置绝对和高度汽车的div。每个div里面都有高度为aut的内容div，并且它们正确地展开以适合其内容。它都连接到一个JavaScript的滑动。整个事情只有当我设置一个固定的高度包装div。否则，在包装上使用高度自动或使用javascript将包装div设置为内部div高度（这也是高度自动），使页面不会展开&显示全部内容。

你会考虑的第一件事是由于内部div的绝对位置，wrapper div不会展开高度。这只是问题的一部分。如果我确实将位置改为相对，它只会显示部分div。我曾尝试使用JavaScript来设置包装div从内部divs，但这些内部divs也有高度自动位置。而且我无法在内容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，但它仍然没有成功。我会进一步研究这一点。

谢谢！

来源

2014-02-26 naty1982

可能这会为你工作： http://stackoverflow.com/a/10154965/1716578 – myusuf

彩车清除好了，但谢谢你！ – naty1982

设置带class = “内容包” 的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";

来源

2014-02-26 20:49:17

非常感谢你的贡献。请参阅已编辑的答案，在其中添加了我的javascript，并尝试调整它，但尚未完成此技巧 – naty1982

高度自动上升，以扩大高度

回答

相关问题