web-dev-qa-db-fra.com

Extension du conteneur parent avec une hauteur de 100% pour tenir compte du contenu flottant

J'ai du mal avec un projet client. Tous mes divs n'ont pas de positionnement absolu, height:100% pour html, body et conteneur divs, et pourtant le contenu statique s'arrête en deçà de son contenu (à 910 pixels).

Je peux changer la propriété de débordement en auto et l'arrière-plan continuera jusqu'à la fin du contenu, mais il ajoute une barre de défilement et la bordure inférieure du contenu statique div reste au même endroit (à 910 pixels).

MISE À JOUR: Le lien de développement n'était plus valide, je l'ai donc supprimé. Il suffit de dire que l'explication détaillée d'Animuson est la partie précieuse de ce fil et a résolu le problème des conteneurs qui ne s'étendent pas pour correspondre à leur contenu. - Ty

csscss-float
21
Ty Morton

Vous avez utilisé la mauvaise propriété overflow-y pour effacer et vous devez définir un min-height au lieu d'une hauteur normale. Essaye ça:

#static-content {
    background-color: #FFFFFF;
    margin: 0 auto;
    min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */
    overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */
    position: relative;
    width: 960px;
}

Contenu flottant par lui-même

Étant donné cette boîte verte qui a un remplissage de 20px (pour la visibilité), notez comment une seule boîte rouge flottant à gauche s'étendra au-delà de la limite de sa boîte parente. En effet, le contenu flottant ne prend pas réellement de "place" dans la zone visuelle. Tous les autres éléments s’étendront en dessous et seul text s’enroulera autour de lui.

Example 1

Effacement du contenu flottant dans le parent

Pour contrer cela et faire en sorte que la boîte verte englobe complètement la zone de sa boîte rouge enfant, nous pouvons ajouter overflow: hidden à ses styles. Cela élargira la boîte assez loin.

Example 2

Extension du parent à 100% de la hauteur

Vous pourriez penser que simplement ajouter height: 100% est le moyen le plus simple de le développer à l'endroit où il doit être. Cependant, la propriété height spécifie une hauteur absolue. Puisque le contenu qui est flotté n'occupe pas réellement d'espace vertical, notre propriété overflow: hidden coupera tout le contenu qui dépasse la hauteur du parent.

Example 3

Utiliser plutôt une hauteur minimale

Puisque nous souhaitons qu'il se développe à au moins à 100% de la hauteur, nous pouvons utiliser la propriété min-height pour le forcer là-bas tout en maintenant la hauteur "automatique" nécessaire pour que la boîte verte parente englobe complètement la boîte rouge enfant, ne le laissant dépasser les 100% que lorsqu'il en a aussi besoin.

Example 4

Comment vous avez été mis en place

Tous les éléments, par défaut, sont définis sur overflow: visible, de sorte que cette propriété ne change rien. La seule différence que vous aviez entre ceci et le premier exemple que j'ai fourni est que vous aviez un height: 100% défini sur l'élément. Ainsi, le parent était en expansion à 100% de la taille mais n’englobait toujours pas toute la hauteur de sa boîte rouge enfant.

Example 5

87
animuson

Si height: 100% ne fonctionne pas bien pour vous, vous pouvez essayer cette fonction de calcul à partir de CSS3:

/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);

Vous pouvez essayer cela soit avec height, soit avec min-height, comme déjà dit. Vous pouvez avec cette fonction de calcul également d'autres calculs tels que:

 height: -moz-calc(100% - 50px);

Et cela est parfois très utile, comme vous pouvez le deviner.

2
jsidera

Si vous devez utiliser overflow: visible pour une raison quelconque, il existe un autre moyen de forcer le conteneur à s'étirer pour contenir tout le contenu flottant. Vous devez mettre element avec clear: les deux comme éléments du dernier conteneur. Si vous ignorez les anciens IE (<8), vous pouvez le faire avec des css très simples (vide https://css-tricks.com/snippets/css/clear-fix/ ):

.your-container:after {
  content: "";
  display: table;
  clear: both;
}
2
Łukasƨ Fronczyk

height:100% est la hauteur du contenu qui coule avec votre conteneur et ne tient pas compte de votre contenu flottant. C'est pourquoi la hauteur de votre conteneur est courte. Retirez-le et effacez correctement votre conteneur pour effacer vos éléments flottants et cela fonctionnera:

#static-content:before, #static-content:aftr {
 display:table;
 content:"";
}

#static-content:after {
 clear:both;
}

#static-content {
 zoom:1; /*ie fix*/
}
1
Andres Ilich

Vous avez une float dans static-maincontent, qui le supprime du flux normal du contenu du document et par conséquent, static-content ne se soucie plus de sa hauteur et ne veut donc pas s’étendre pour le couvrir . height:100% pour static-content.

0
Abhranil Das

LIRE POUR RÉPONDRE !!! - D'accord, j'avais donc le même problème, il suffisait de supprimer le style "Positionnement". Devrait fonctionner parfaitement bien. 

0
user4895927