適合容器高度來分層內容（到可見層）

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