Comment puis-je obtenir un div conteneur pour développer à la hauteur de son contenu?

Question

Je veux que le conteneur div s'étende jusqu'à la hauteur du contenu interne de la div (la liste non ordonnée). Je n'arrive pas à le faire marcher. Des idées?

HTML:

<div class="container"> 
    <ul id="list"> 
     <li>stuff</li> 
     ... 
    </ul> 
</div> 

CSS: (ne fonctionne pas)

.container { 
    width: 332px; 
    height: 100%; 
    padding: 0.4em; 
    position: relative; 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

#list { 
    position: absolute; 
    height:auto; 
    width:317px; 
} 

Answer 1

enlever height: 100%; et position: relative; de .container et enlever position: absolute; de #list.

Answer 2

Les overflow-y:scroll en conflit avec votre exigence que vous le souhaitez développer, tout comme le height:100% puisque 100% est basé sur la hauteur de l'élément contenant .container.

Ce que vous devez faire est de retirer height:100% et overflow-y:scroll, remplacer par overflow-y:hidden et je crois cela devrait fonctionner.

PS. Pourquoi avez-vous besoin que le #list soit position:absolute?

Answer 3

Deux options: Soit ajouter de la hauteur: 100% pour #list

#list{ 
position: absolute; 
height:auto; 
width:317px; 
height: 100%; 
} 

Ou faire comme conteneur ID:

#container{ 
... 
} 

Answer 4

Définition d'un attribut min-width et/ou max-width pour .container