CSS prendre de la hauteur de l'enfant en position absolue

Question

j'ai un conteneur qui est fixé à une hauteur max-width:780px et est non déclaré. À l'intérieur du conteneur, il y a un diaporama d'images. Tout sur la page est réactif, de sorte que la largeur diminue, l'image (dont la largeur est définie sur 100%) ajuster le conteneur hauteurs.

Le changement de diaporama sont les images à display:static; et position:absolute; qui ne « tient ouverte » le récipient parce qu'il est pas considéré comme contenu du conteneur

est-il une solution créative là-bas pour prendre la hauteur d'un élément enfant c'est absolument positionné?

exemple ci-dessous a aucune hauteur déclarée sur le conteneur principal .. rien tient ouvert. http://dhut.ch/test/santos/

Merci!

Answer 1

Supprimer la position absolue. J'éviterais aussi le style en ligne.

Answer 2

Je pense que vous feriez mieux de changer votre approche. Pour les curseurs, les meilleures pratiques consistent à faire flotter les éléments enfants du conteneur et à utiliser également l'une des techniques connues pour empêcher le grand effondrement des parents. Donc, je vous suggère de supprimer la position: absolute règle CSS à partir d'images et de flotter dans votre <div id='main'>, puis utilisez l'une de ces méthodes pour le forcer à l'environnent des enfants:

1. div#main {overflow: hidden;}
2. div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
3. Ajouter un <div style='clear: both;'> à la fin de votre conteneur div principal.

Answer 3

sont les images toutes les mêmes dimensions? Si oui, vous pouvez utiliser un pourcentage padding-top sur l'élément qui contient les images.

Donc, si vos images sont, par exemple, 760px de large par 500px de hauteur, c'est 500/760 = 0,65789

qui en pourcentage se traduirait par quelque chose comme:

#main { 
    position: relative; 
    max-width: 760px; 
    padding-top: 65.789%; 
} 

Pourquoi ça fonctionne? est parce qu'avec padding si elle est définie avec un pourcentage, il est calculé comme un pourcentage de la largeur. Comme l'élément se rétrécit en largeur, la hauteur rétrécira proportionnellement et la boîte restera dans le même rapport de largeur à hauteur. Les images, positionnées absolument, ne seront pas ajoutées à la hauteur de la boîte.

Cela va travailler aussi longtemps que vos images sont le même rapport d'aspect et vous n'êtes pas attendre que le ratio de changer. Si vous utilisez beaucoup d'images aléatoires, ce n'est pas pour vous.

Answer 4

J'ai récemment eu un problème similaire avec une image que j'avais besoin de position absolue en haut d'une page modèle de base de Zurb afin de le sortir du flux et de réinitialiser ses dimensions (Image devait s'étirer aux bords de l'enveloppe , à la place être entouré de son parent .row padding). Cependant, bien sûr, cela signifiait que tous les éléments sensibles au fluide situés en dessous apparaissaient tout en haut de l'image. Définir un margin-top ou positionner les éléments frères ci-dessous signifiait un espace supérieur rigide qui n'a pas redimensionné avec la largeur du navigateur.Pour contourner le problème, j'ai placé une copie de l'image juste après l'image positionnée en absolu et j'ai mis visibility: hidden; pour ajouter un peu de marge supplémentaire pour compenser la différence de hauteur, mais le résultat final Tout est sur la page qui coule exactement à la hauteur de l'image utilisée.

J'ai aussi utilisé le truc de remplissage décrit par unexplainedBacn ci-dessus, et il est un grand tour aussi. Cela prend un peu de calcul, mais j'ai voté pour cette réponse. Excellente solution