Question

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

我希望容器在它们之间切换时使其高度适合可见图层，但是当我们缩小页面时，我们也是如此。一般来说，我想创建一个立即加载其所有内容的页面，并动态选择显示的内容，所以这可能是另一种方式吗？

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

function selectLayer（layer_id）{ var objs = document.getElementsByClassName（“content-layer”）; for（var i = 0; i＆lt; 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; // <---

} else { objs [i] .style.visibility =“hidden”; } } } 如何实现全面目标？或者至少，我的代码出了什么问题？

其余代码，HTML：

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

CSS：

#contents { 位置：相对; z-index：100; 最小高度：350px; margin-left：120px; border-width：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并且一次只显示一个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

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

2 个答案: