Wie wird ein Bildlauf nach einer bestimmten Höhe angezeigt, die Höhe sollte jedoch nicht festgelegt werden?

Ich habe ein Div mit folgendem Stil: height:250px;scroll:auto;. Ich möchte, dass es nach 250 Pixeln scrollt, aber die Höhe sollte dem darin enthaltenen Inhalt entsprechen.

Wenn der Inhalt beispielsweise 100 Pixel groß ist, sollte die Höhe von div ohne Bildlauf 100 betragen. Wenn die Höhe jedoch 250 Pixel überschreitet, sollte ein Bildlauf angezeigt werden.

Wie geht das?

Ist es das, was Sie suchen?

Demo

CSS:

.dyn-height {
    width:100px;
    max-height:250px;
    overflow-y:scroll;
}

height: optional – nur für die Demo.

Versuchen Sie Folgendes: max-height sollte den Zweck erfüllen.

html

<div class="height">
    blah<br/>
    blah<br/>
</div>

CSS:

.height { max-height:250px; border:1px solid red; overflow:auto; }

Verwenden overflow-y mit dem auto Möglichkeit. Auf diese Weise wird die Bildlaufleiste erst angezeigt, wenn sie benötigt wird. Andernfalls wird die Bildlaufleiste angezeigt, auch wenn Sie sie nicht benötigen.

 .my_div {
        width:100px;
        max-height:250px;
        overflow-y:auto;
    }

Versuchen Sie es einfach mit max-height und führen Sie overflow-y:scroll aus

.hidden {
width:100px;
max-height:250px;
overflow-y:scroll;

}

<div class="hidden">

<h5>If the content in this div exceeds 250px it should appear a scroll bar</h5>

</div>

Für diejenigen, die versuchen, eine scrollbare Datei zu erstellen <table> mit Bootstrap 5:

Die akzeptierte Antwort funktioniert darauf (oder darin) nicht.

.dyn-height {
    max-height:250px;
    overflow-y:scroll;
}

Sie müssen die Klasse zu einem umgebenden div-Element wie diesem hinzufügen

<div class="dyn-height">
  <table>
    ...
  </table>
</div>