Aller au contenu

Hauteur d'un div conteneur


Ernestine

Sujets conseillés

Bonjour,

Depuis deux bonnes heures, je suis sur un problème que je n'arrive pas à résoudre.

J'ai un div Conteneur, contenant des divs en position absolute. Je souhaite que la hauteur du Conteneur s'adapte automatiquement à son contenu. Or elle reste inéluctablement à 0px...

Si les éléments à l'intérieur sont en position relative, ou placés dans le flux, pas de problème. Mais quand ils sont en postion absolute, il n'y a rien à faire :(

Avez-vous la solution ?

Ernestine

édit : ce n'est pas la largeur du Conteneur qui reste à 0 px, mais la hauteur !

Lien vers le commentaire
Partager sur d’autres sites

Si les éléments à l'intérieur sont en position relative, ou placés dans le flux, pas de problème. Mais quand ils sont en postion absolute, il n'y a rien à faire :(

Avez-vous la solution ?

Tu le dis toi-même : lorsque les éléments sont positionnés en absolu, ils ne sont plus dans le flux, donc leur "conteneur" n'est plus du tout influencé par eux... sauf s'il est lui-même positionné.

Lien vers le commentaire
Partager sur d’autres sites

Salut Sibélius,

J'entends bien, et c'est ce que j'ai fait, vu que j'ai lu tous tes articles. Mon div Conteneur est bel et bien en position:relative, et en effet, les éléments qu'il contient (en position:absolute) sont parfaitement positionnés.

Non, le problème, c'est que ce fichu div Conteneur garde cette fichue hauteur de 0 px. C'est ennuyeux, car du coup, la couleur de fond est celle du body, et non pas celle du Conteneur.

Mine de rien, le CSS a vraiment une lacune pour gérer les hauteurs de div. On trouve des milliers d'astuces sur tous les sites spécialisés, mais il n'y en a aucune d'universelle.

A bientôt,

Ernestine

Lien vers le commentaire
Partager sur d’autres sites

Est-ce que tes blocs de contenu ont une hauteur définie ?

Si non, il est normal - vu leurs schemas de positionnement - que leur conteneur n'ait pas de hauteur.

Il faudrait peut-être adopter un positionnement flottant pour les éléments contenus, si tu veux influer sur la hauteur du conteneur.

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Tu as raison, le positionnement vertical des div est franchement pas cool.... J'ai galéré pas mal de temps, moi aussi, pour poser mon footer à la suite du contenu !

L'idéal serait que tu puisses placer ton contenu non pas en position absolue mais en position relative... Tu repousserais alors les limites du conteneur.

Exemple :

conteneur en position relative

tout le header en position absolue (sort du flux, ne modifie pas le conteneur)

le menu de gauche en position absolue également...

Ensuite, le contenu en position relative, qui prendra donc un positionnement par rapport au coin haut/gauche de ton conteneur, le dernier élément relatif : tu le places là où tu veux, et c'est donc lui qui modifiera la taille de ton conteneur.

Voilà, ça devrait marcher normalement...

Sinon, donne l'url de la page en question, on pourrait regarder comment c'est fait ;)

Lien vers le commentaire
Partager sur d’autres sites

Merci,

J'ai essayé, Sarc, mais ça ne marche pas.

Voici l'exemple avec des carrés de couleur : http://www.blog-ernestine.net/extras/Design/design.html (les styles sont dans le code source).

Le carré rouge est en absolute, il n'intervient pas, je peux l'enlever de la page sans que ça influe sur le reste.

Le carré vert foncé est en position relative, à top:350px et height:400px. Je m'attends donc à ce que le conteneur (vert clair) ait une hauteur égale à 350+400=750px. Il n'en est rien : sa hauteur est de 400 px, soit celle du carré vert foncé. Conclusion : le positionnement à 350px en hauteur n'a pas été pris en compte :(

Ernestine

édit : j'effectue tous ces tests sous FireFox ! Sous ie l'affichage est sûrement différent.

Modifié par Ernestine
Lien vers le commentaire
Partager sur d’autres sites

#conteneur { position: relative; width: 800px; margin-left: auto; 
padding-top:350px;margin-right: auto; background-color: rgb(0, 255, 153); }

#contenuabsolu { position: absolute; width: 200px; height: 200px; left: 100px; top: 100px; background-color: rgb(255, 153, 102); }

#contenurelatif { position: relative; width: 400px; height: 400px; left: 350px;  background-color: rgb(102, 204, 0); }

Le tour est joué ;)

Lien vers le commentaire
Partager sur d’autres sites

Sibélius > C'est vrai... Mais si les divs de ma page sont en position absolue, c'était par nécessité, et je n'aurais vraiment pas pu (enfin je crois) faire une mise en page avec des éléments flottants ;)

Sarc > Ca marche :up: Merci !

A bientôt,

Ernestine

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...