ajuster la hauteur du conteneur au contenu en couches (à la couche visible)

Question

J'ai un div, le conteneur et quelques autres div s à l'intérieur - les couches. La visibilité des couches est commutée dynamiquement avec JavaScript.

Je souhaite que le conteneur corresponde à sa hauteur par rapport à la couche visible lors de la permutation entre les deux, mais également lorsque nous agrandissons ou relâchons la page. Généralement, je veux créer une page qui charge instantanément tout son contenu et choisit dynamiquement ce qui est spectacle, alors peut-être que cela peut être fait d'une autre manière?

Mon approche consistait à mettre une couche sur une autre en les positionnant de façon «absolue», mais avec ce positionnement le conteneur ne correspond plus à sa hauteur. J'ai donc essayé de changer la hauteur avec JavaScript en changeant de couche (laissant le support pour le zoom) mais ça ne marche pas, la hauteur reste la même (minime):

function selectLayer (layer_id) { var objs = document.getElementsByClassName ("couche de contenu") pour (var i = 0; i < objs.length; i ++) { if (objs [i] .id == id_couche) { objs [i] .style.visibility = "visible";

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

} else {obj [i] .style.visibility = "hidden"; } } } Comment atteindre l'objectif complet? Ou au moins, quel est le problème avec mon code?

Le reste du code, HTML:

... certains contenus ... ... certains contenus ... ... certains contenus ...

CSS:

#contents { position: relative; z-index: 100; min-hauteur: 350px; marge gauche: 120px; largeur de bordure: 8px; rembourrage: 0 0,75em; }

.content-layer { position: absolue; visibilité: caché; }

FF 3.6

Answer 1

Vous utilisez la mauvaise propriété pour obtenir et régler la hauteur de votre div. Essayez:

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

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

Et si vous voulez cacher plusieurs divs et seulement montrer un à la fois, vous n'avez pas besoin de truquer avec le positionnement absolu et pixel Javascript pousser. Il suffit de mettre le style display: none; à chaque div que vous voulez caché et display: block; à l'élément visible. visibility: hidden cache un élément d'être dessiné sur l'écran mais lui permet toujours de prendre de la place. D'autre part, display: none; supprime toutes les traces visuelles d'un élément.Par exemple, prenez une image haute de 500 pixels avec une légende au-dessous. Réglez visibility: hidden; et il va disparaître, mais la légende sera toujours au même endroit, en dessous de l'endroit où l'image était. Réglez maintenant display: none; et la légende se déplacera à l'endroit où se trouvait le haut de l'image, environ 500px plus haut. En d'autres termes, l'élément contenant s'adapte généralement automatiquement à la hauteur des éléments à l'intérieur qui occupent de l'espace.

Answer 2

Essayez d'utiliser objs[i].offsetHeight au lieu de objs[i].height