подогнать высоту контейнера к слоистому содержимому (к видимому слою)

Question

У меня есть div, контейнер и несколько других div s внутри - слои.Видимость слоев динамически переключается с помощью JavaScript.

Я хочу, чтобы контейнер соответствовал своей высоте видимому слою при переключении между ними, а также при увеличении или уменьшении страницы.Как правило, я хочу создать страницу, которая мгновенно загружает все ее содержимое и динамически выбирает, что показывать, поэтому, может быть, это можно сделать по-другому?

Мой подход заключался в том, чтобы поместить один слой на другой, расположив их «абсолютно».", но при таком расположении контейнер больше не соответствует своей высоте.Поэтому я попытался изменить высоту с помощью JavaScript при переключении слоев (оставив поддержку масштабирования), но, похоже, она не работает, высота все та же (минимальная):

function selectLayer (layer_id) {var objs = document.getElementsByClassName ( "Content-слой");for (var i = 0; i

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

} else {objs [i] .style.visibility = "hidden";}}} Как достичь полной цели?Или, по крайней мере, что не так с моим кодом?

Остальной код, HTML:

... некоторый контент ... ... некоторый контент ... ... некоторый контент...

CSS:

# содержание {позиция: относительная;z-индекс: 100;минимальная высота: 350 пикселей;поле слева: 120 пикселей;ширина границы: 8 пикселей;набивка: 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 

И если вы хотите скрыть несколько делений и показывать только по одному за раз, вам не нужно выдумывать с абсолютным позиционированием и нажатием на пиксели JavaScript.Просто установите стиль display: none; для каждого div, который вы хотите скрыть, и display: block; для видимого элемента.visibility: hidden скрывает элемент от прорисовки на экране, но все же позволяет ему занимать место.display: none; с другой стороны удаляет все визуальные следы элемента.

Например, возьмите изображение высотой 500px с подписью под ним.Установите visibility: hidden; на него, и оно исчезнет, ​​но заголовок все равно будет в том же месте, ниже того места, где раньше было изображение.Теперь установите display: none;, и заголовок переместится туда, где раньше была верхняя часть изображения, примерно на 500 пикселей вверх.Другими словами, содержащий элемент обычно автоматически подстраивается под высоту элементов внутри него, которые занимают место.

Answer 2

Попробуйте использовать objs[i].offsetHeight вместо objs[i].height