适合容器高度来分层内容（到可见层）

Question

我有一个div，容器和其他几个div里面 - 图层。通过JavaScript动态切换图层的可见性。

我希望容器在它们之间进行切换时将其高度调整为可见图层，而且当我们将页面放大或缩小时。一般来说，我想创建一个能立即加载所有内容并动态选择显示内容的页面，所以也许可以通过另一种方式完成？

我的方法是通过将它们定位为“绝对”来将一层放在另一层上，但通过这种定位，容器不再适合其高度。所以我尝试在切换图层时改变高度（留下对缩放的支持），但它似乎不起作用，高度仍然是相同的（最小）：

function selectLayer（layer_id）{objs = document.getElementsByClassName （“内容层”）;对于（var i = 0; i < objs.length; i ++）if（objs [i] .id == layer_id）{ objs [i] .style.visibility =“visible”;

/* no reaction after executing line below */ 
objs[i].parentNode.height = objs[i].height + 20; // <--- 

}否则{ 的OBJ [I] .style.visibility = “隐藏”; } } } 如何实现完整目标？或者至少，我的代码有什么问题？

的代码的其余部分，HTML：

......一些内容...... ......一些内容...... ......一些内容......

CSS：

#contents { position：relative; z-index：100; min-height：350px; margin-left：120px; border-width：8px; 填充：0 0.75em; }

.content-layer { position：absolute; 知名度：隐藏; }

FF 3.6

Answer 1

您使用了错误的属性来获取和设置您的div的高度尝试。试试这些：

var height = objs[i].offsetHeight //Get height 

objs[i].parentNode.style.height = (height+20) + 'px'; //Set height 

如果你想隐藏一些div的和只显示一次一个，你不需要有绝对定位和Javascript像素推捏造。只需将样式display: none;设置为您要隐藏的每个div，并将display: block;设置为可见元素。 visibility: hidden隐藏屏幕上绘制的元素，但仍允许占用空间。另一方面，display: none;删除元素的所有视觉痕迹。

例如，拍摄一张500px高的图片，下面有一个标题。将它设置为visibility: hidden;，它将消失，但标题仍然位于图像以前的相同位置。现在将其设置为display: none;，标题将移动到图片顶部的位置，大约500px。换句话说，容纳元素通常会自动适应其中占据空间的元素的高度。

Answer 2

使用objs[i].offsetHeight代替objs[i].height