web-dev-qa-db-fra.com

Div parent ne s'étendant pas à la taille des enfants

Comme vous le verrez, j'ai un div (#innerPageWrapper) qui enveloppe les divs qui contiennent le contenu. #innerPageWrapper agit également visuellement comme une bordure semi-transparente dans la mise en page.

Mon problème est que #innerPageWrapper ne se développera pas pour s'adapter aux enfants à l'intérieur, sans parler de se développer pour remplir le reste de la page.

Ceci est le code pour #innerPageWrapper

#innerPageWrapper {
    width: 1100px;
    height: 100%;
    display: inline-block;
    padding: 0 50px 0 50px;
    background: rgba(0, 0, 0, 0.75) url(navShadow.png) repeat-x top;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

J'ai essayé de nombreuses choses (y compris en utilisant calc () pour les hauteurs div) sans succès. Je veux éviter d'utiliser jQuery.

csshtmlheightexpand
22
Andrew Mihelakis

Tout d'abord, vous utilisez height:100%; qui dans votre cas est erroné. Pour une explication des raisons de ne pas utiliser height:100%, vérifiez ce article;

Pour comprendre pourquoi, vous devez comprendre comment les navigateurs interprètent la hauteur et la largeur. Les navigateurs Web calculent la largeur totale disponible en fonction de la largeur d'ouverture de la fenêtre du navigateur. Si vous ne définissez aucune valeur de largeur sur vos documents, le navigateur transfère automatiquement le contenu pour remplir toute la largeur de la fenêtre.

Mais la hauteur est calculée différemment. En fait, les navigateurs n'évaluent pas la hauteur du tout sauf si le contenu est si long qu'il sort du port de vue (ce qui nécessite donc des barres de défilement) ou si le concepteur Web définit une hauteur absolue sur un élément de la page. Sinon, le navigateur laisse simplement le contenu circuler dans la largeur du port de vue jusqu'à la fin. La hauteur n'est pas du tout calculée. Le problème se produit lorsque vous définissez un pourcentage de hauteur sur un élément dont les éléments parents n'ont pas de hauteur définie. En d'autres termes, les éléments parents ont une hauteur par défaut: auto ;. Vous demandez en effet au navigateur de calculer une hauteur à partir d'une valeur indéfinie. Comme cela équivaudrait à une valeur nulle, le résultat est que le navigateur ne fait rien.

Deuxièmement, pour que le div externe (dans ce cas # innerPageWrapper) entoure les éléments enfants, vous devez utiliser overflow:hidden sur ce wrapper.

Pour que cela fonctionne correctement, vos éléments enfants doivent pas être position:absolute comme vous l'avez pour # contentMain et # contentSidebar, faites plutôt ces floats ( float: gauche et float: droite) et après la fermeture de la # contentSidebar, ajoutez un <div style="clear:both"></div> pour dégager les flotteurs, permettant au parent de s'enrouler parfaitement autour d'eux.

J'ai mis le CSS requis dans this Pastebin, notez que vous devez effacer vos flotteurs en utilisant un div comme je l'ai mentionné ci-dessus.

78
BrownEyes

Essayez de définir la largeur et la hauteur de l'élément parent sur auto. Exemple simplifié:

http://jsfiddle.net/kimgysen/8nWDE/

#innerPageWrapper {
    width:auto;
    height:auto;
    background:red;
}

#innerPageWrapper p{
    width: 100px;
    height: auto;
    margin: 10px auto;
    background: yellow;
}

Modifier:

Vérifiez ce violon pour un exemple plus avancé, y compris le centre horizontal et vertical: http://jsfiddle.net/kimgysen/8nWDE/1/

L'élément parent s'adaptera dynamiquement aux limites des éléments enfants.
Vous pouvez également définir la largeur et la hauteur dynamiques sur les éléments enfants.

.outerDiv{
    display: table-cell;
    background-color: yellow;
    width: auto; 
    height: auto;
    vertical-align: middle;
    text-align: center;
}

.innerDiv{
    display: inline-block;
    background-color: red; 
    width: 100px;
    height: 100px;
    margin: 20px;
}
9
Trace