Wie kann ich die <div> -Höhe automatisch an den Inhalt anpassen?

Ich habe eine, <div>die automatisch an den Inhalt angepasst werden muss. Wie kann ich das machen? Im Moment kommt mein Inhalt aus dem<div>

Die Klasse, die ich für das div verwendet habe, ist wie folgt

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

Versuchen Sie es mit dem folgenden Aufschlag, anstatt die Höhe direkt anzugeben:

.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>

Schreiben Sie einfach "min-height: XXX;" Und "Überlauf: versteckt;" & Sie werden aus diesem Problem heraus sein

min-height: 100px;
overflow: hidden;

Einfach schreiben:

min-height: xxx;
overflow: hidden;

dann divwird automatisch die Höhe des Inhalts genommen.

Ich habe im DIV Folgendes verwendet, dessen Größe geändert werden muss:

overflow: hidden;
height: 1%;

Ich habe einige Möglichkeiten erreicht, um die Höhe für mein Projekt automatisch anzupassen, und ich denke, ich habe eine Lösung gefunden

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

Dies kann an prime div(z. B. Warpper, aber nicht an bodyoder htmlbewirkt, dass die Seite nicht nach unten rollt ) in Ihrer CSS-Datei angehängt und von anderen untergeordneten Klassen geerbt und in dieses overflow: inherit;Attribut geschrieben werden.

Hinweis: Seltsam ist, dass meine Netbeans 7.2.1 IDE hervorheben, overflow: inherit;da Unexpected value token inheritaber alle modernen Browser dieses Attribut gut lesen.

Diese Lösung funktioniert sehr gut in

• Firefox 18+
• Chor 24+
• dh 9+
• Oper 12+

Ich teste es nicht auf früheren Versionen dieser Browser. Wenn jemand es überprüft, wird es schön sein.

benutze einfach folgendes

height:auto;

Wenn Sie die Antwort noch nicht erhalten haben, wird Ihr "float: left" angezeigt. vermasselt was du willst. Erstellen Sie in Ihrem HTML-Code einen Container unter Ihren schließenden Tags, auf die Floating angewendet wurde. Geben Sie für diesen Container Folgendes als Ihren Stil an:

#container {
clear:both;
}

Getan.

Nicht einstellen height. Verwenden Sie min-heightund max-heightstattdessen.

Sie könnten versuchen, das div-Tag passt die Höhe automatisch an den Inhalt an:

height: fit-content;

Stellen Sie einfach die Höhe auf auto ein, um das Problem zu beheben, da div Blockelemente sind, sodass sie sich auf die volle Breite und Höhe aller darin enthaltenen Elemente erstrecken. Wenn die Höhe auf "Automatisch" nicht funktioniert, fügen Sie einfach nicht die Höhe hinzu. Sie sollte angepasst werden und sicherstellen, dass das Div auch keine Höhe von seinem übergeordneten Element erbt.

Einfache Antwort ist zu verwenden overflow: hiddenundmin-height: x(any) px die Größe von div automatisch anzupassen.

Das height: autowird nicht funktionieren.

Stellen Sie eine Höhe auf den letzten Platzhalter div ein.

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

Min- Height : (some Value) units  

---- Verwenden Sie nur diesen Fall von Elementen, bei denen Sie keinen Überlauf verwenden können, wie z. B. Tooltip

Andernfalls können Sie die Überlaufeigenschaft oder die Mindesthöhe je nach Bedarf verwenden.

Ich habe es gerade benutzt

overflow: hidden;

Und es hat bei mir richtig funktioniert. Diese Div hatte einige Float Lefted Divs.

<div>sollte automatisch erweitert werden. Ich denke, dass das Problem ist, dass Sie behoben verwenden height:100px;, versuchen Sie es durch zu ersetzenmin-height:100px;

verwenden min-heightstattheight

Ich habe mein Problem behoben, indem ich die Position des Elements innerhalb eines div auf relativ gesetzt habe.

Höhe: 59,55%; // Geben Sie zuerst Ihre Höhe an und lassen Sie dann den Überlauf automatisch überlaufen: auto;

Für mich, nachdem ich alles ausprobiert hatte, funktionierte das folgende CSS:

float: left; width: 800px;

Versuchen Sie es in Chrome, indem Sie das Element überprüfen, bevor Sie es in die CSS-Datei einfügen.

Die meisten davon sind großartige Antworten, aber ich bin der Meinung, dass sie einen unvermeidlichen Aspekt der Webentwicklung auslassen, nämlich das laufende Seiten-Update. Was ist, wenn Sie kommen und diesem Div Inhalte hinzufügen möchten? Sollten Sie immer kommen, um die Mindesthöhe des Div einzustellen? Nun, während ich versuchte, diese beiden Fragen zu beantworten, habe ich stattdessen den folgenden Code ausprobiert:

.box-centerside {
  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
  float: left;
  height: auto; /* adjusts height container element according to content */
  width: 260px;
}

Außerdem, nur für eine Art Bonus, wenn Sie Elemente um dieses Div mit Eigenschaften wie haben position: relative;, würden sie folglich über diesem Div stapeln, weil es eine Eigenschaft hat. float: left;Um ein solches Stapeln zu vermeiden, habe ich den folgenden Code versucht:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* number depends on how many columns you want for a particular screen width. */
  height: auto; /* adjusts height container element according to content */
}

.box-centerside {
  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
  height: auto; /* adjusts height container element according to content */
  width: 100%;
}

.sibling 1 {
  /* Code here */
}

.sibling 2 {
  /* Code here */
}

Meiner Meinung nach passt diese Rastermethode besser zu einer reaktionsfähigen Website. Ansonsten gibt es viele Möglichkeiten, die gleichen Ziele zu erreichen. Einige der wichtigen Ziele der Programmierung sind jedoch, die Codierung einfacher und lesbarer sowie verständlicher zu machen.