web-dev-qa-db-fra.com

Comment ajuster automatiquement la hauteur <div> en fonction du contenu?

J'ai un <div> qui doit être ajusté automatiquement en fonction de son contenu. Comment puis-je faire ceci? En ce moment, mon contenu sort du <div>

La classe que j'ai utilisée pour la 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;
}
csshtml
65
OM The Eternity

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;
}
<div class="box-centerside">
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
</div>

40
Barrie Reader

Il suffit d'écrire "min-height: XXX;" Et "débordement: caché;" Et vous serez hors de ce problème.

min-height: 100px;
overflow: hidden;
76
Adi

Ecrivez:

min-height: xxx;
overflow: hidden;

alors div prendra automatiquement la hauteur du contenu.

17
Winchester

J'ai utilisé les éléments suivants dans la DIV qui doit être redimensionnée:

overflow: hidden;
height: 1%;
12
Cleyton

J'ai fait quelques efforts 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é à prime div (par exemple, warpper, mais pas à body ou html car la page ne défilera pas) dans votre fichier css et hérité par d'autres classes enfants et y écrire l'attribut overflow: inherit;.

Remarque: Ce qui est étrange, c’est que mon netbeans 7.2.1 IDE surligne overflow: inherit; en tant que Unexpected value token inherit mais que tous les navigateurs modernes lisent cet attribut sans problème.

Cette solution fonctionne très bien dans

  • firefox 18+
  • chorme 24+
  • soit 9+
  • opéra 12+

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

8
Egel

Ne définissez pas height. Utilisez min-height et max-height à la place.

3
Delan Azabani

Si vous n'avez pas encore eu la réponse, votre "float: left;" est en train de déconner ce que vous voulez. Dans votre code HTML, créez un conteneur sous vos balises de fermeture auxquelles l’application de flottant est appliquée Pour ce conteneur, incluez ceci comme style:

#container {
clear:both;
}

Terminé.

3
Thomas

définissez simplement la hauteur sur auto, cela devrait résoudre le problème, car div sont des éléments de bloc et s'étendent ainsi sur toute la largeur et la hauteur de tout élément contenu dans celui-ci. si height est réglé sur auto ne fonctionne pas, alors, en toute simplicité, n'ajoutez pas la hauteur, vous devez vous assurer que la div n'hérite pas non plus de hauteur de son élément parent ...

2
Charming Prince

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

Le height: auto ne fonctionnera pas.

2
Shahnawaz Alam

juste utiliser ce qui suit

height:auto;
2
Salil

Définir une hauteur au dernier espace réservé div. 

    <div class="row" style="height:30px;">
    <!--placeholder to make the whole block has valid auto height-->
1
Cullen SUN

Vous pouvez essayer, div tag ajustera automatiquement la hauteur au contenu: 

height: fit-content;
1
Hoang
Min- Height : (some Value) units

---- Utilisez seulement cette casse d’éléments pour lesquels vous ne pouvez pas utiliser le débordement, comme tooltip

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

1
Rudresh Ajgaonkar

Je viens d'utiliser 

overflow: hidden;

Et cela a fonctionné pour moi correctement. Cette div avait un peu de flotteurs laissés divs.

1
Thejan Ranathunge

height: 59.55%; // Spécifiez d'abord votre hauteur, puis activez le débordement auto overflow: auto;

0
Bilisuma Mekonnen

utilisez min-height au lieu de height

0
pawan

J'ai résolu mon problème en définissant la position de l'élément à l'intérieur d'une div sur relative;

0
MadeInDreams

Pour moi, après avoir tout essayé, le css ci-dessous a fonctionné:

float: left; width: 800px;

Essayez en chrome en inspectant un élément avant de le placer dans un fichier css.

0
Srihari Karanth

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

0
Tomasz Zielinski