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

Question

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

我希望容器在它们之间切换时，以及当我们放大或缩小页面时，使其高度适合可见层。一般来说，我想创建一个页面，立即加载其所有内容并动态选择显示的内容，所以也许这可以通过其他方式完成？

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

function selectLayer(layer_id) { var objs = document.getElementsByClassName("content-layer"); for (var i = 0; i

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

} 其他 { objs[i].style.visibility = "隐藏"; } } } 如何实现完整的目标？或者至少，我的代码有什么问题？

其余代码，HTML：

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

CSS：

#内容{ 位置：相对； z 指数：100； 最小高度：350px； 左边距：120px； 边框宽度：8px； 填充：0 0.75em； }

.content-layer { 位置：绝对； 可见性：隐藏； }

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; 会移除元素的所有视觉痕迹。

例如，拍摄一张 500 像素高的图片，图片下方有一个标题。将visibility: hidden; 设置为它，它会消失，但标题仍将在同一个位置，低于图像原来的位置。现在将display: none;设置为它，标题将移动到图片顶部的位置，大约500px。换句话说，包含元素通常会自动调整到其内部占用空间的元素的高度。

Answer 2

尝试使用objs[i].offsetHeight 而不是objs[i].height