Comment ajuster automatiquement la hauteur en fonction du contenu?

J’ai un

qui doit être ajusté automatiquement en fonction du contenu. Comment puis-je faire ceci? En ce moment mon contenu sort du

La classe que j’ai utilisée pour le div est la suivante

 box-centerside { background:url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent; float:left; height:100px; width:260px; } 

Essayez avec le balisage suivant au lieu de spécifier directement la hauteur:

 .box-centerside { background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent; float: left; min-height: 100px; width: 260px; } 
 
This is sample content
This is sample content
This is sample content
This is sample content
This is sample content
This is sample content
This is sample content
This is sample content
This is sample content
This is sample content
This is sample content
This is sample content

Écrivez simplement “min-height: XXX;” Et “débordement: caché” & vous serez hors de ce problème

 min-height: 100px; overflow: hidden; 

Ecrivez:

 min-height: xxx; overflow: hidden; 

alors div prendra automatiquement la hauteur du contenu.

J’ai utilisé ce qui suit dans le DIV qui doit être redimensionné:

 overflow: hidden; height: 1%; 

J’ai fait quelques ajustements pour ajuster automatiquement la hauteur de mon projet et je pense avoir trouvé une solution

 [CSS] overflow: auto; overflow-x: hidden; overflow-y: hidden; 

Cela peut être attaché à div principal (par exemple warpper, mais pas à body ou html car la page ne défilera pas) dans votre fichier css et héritée par d’autres classes enfants et y écrire: overdate: inherit overflow: inherit; atsortingbut.

Remarque: Ce qui est étrange, c’est que mon netbeans 7.2.1 IDE souligne le overflow: inherit; comme un Unexpected value token inherit mais que tous les navigateurs modernes lisent correctement cet atsortingbut.

Cette solution fonctionne très bien

  • firefox 18+
  • chorme 24+
  • c’est à dire 9+
  • opéra 12+

Je ne le teste pas sur les versions précédentes de ces navigateurs. Si quelqu’un le vérifie, ce sera bien.

Si vous n’avez pas encore reçu la réponse, votre “float: left;” est gâcher ce que vous voulez. Dans votre code HTML, créez un conteneur sous vos balises de fermeture qui ont été appliquées. Pour ce conteneur, incluez ceci comme style:

 #container { clear:both; } 

Terminé.

Ne pas définir la height . Utilisez plutôt min-height et max-height .

Il suffit de définir la hauteur sur auto, ce qui devrait résoudre le problème, car les div sont des éléments de bloc pour qu’ils s’étendent à la largeur et à la hauteur de tous les éléments qu’ils contiennent. Si la hauteur est réglée sur auto ne fonctionne pas, alors simple n’ajoute pas la hauteur, elle doit s’ajuster et s’assurer que le div n’hérite pas non plus de la hauteur de son élément parent …

La réponse simple consiste à utiliser le overflow: hidden et min-height: x(any) px qui ajustera automatiquement la taille de div.

La height: auto ne fonctionnera pas.

juste utiliser suivant

 height:auto; 

Définissez une hauteur au dernier div d’espace réservé.

  
 Min- Height : (some Value) units 

—- N’utilisez que cet élément d’éléments où vous ne pouvez pas utiliser de débordement, comme l’ info-bulle

Sinon, vous pouvez utiliser la propriété de débordement ou min-height selon vos besoins.

Vous pourriez essayer, la balise div ajustera automatiquement la hauteur avec le contenu à l’intérieur:

 height: fit-content; 

devrait se développer automatiquement. Je suppose que le problème est que vous utilisez une height:100px; fixe height:100px; , essayez de le remplacer par min-height:100px;

utiliser min-height au lieu de height

J’ai corrigé mon problème en définissant la position de l’élément dans un div à relative;

Je viens d’utiliser

 overflow: hidden; 

Et ça a fonctionné pour moi correctement. Cette div avait des divs laissés par des flottants.

height: 59.55%; // Spécifiez d’abord votre hauteur, puis faites un débordement automatique: auto;

Utilisez simplement ce type d’affichage:

 display: inline-block;