Salman Virk
Tengo un div con el siguiente estilo: height:250px;scroll:auto;. Quiero que se desplace después de 250 px, pero debería tener una altura de acuerdo con el contenido.
Por ejemplo, si el contenido es 100 px, entonces, la altura de div debe ser 100 sin desplazamiento. Pero, si la altura supera los 250 px, debería mostrar desplazamiento.
¿Cómo puedo hacerlo?
¿Es esto lo que buscas?
CSS:
.dyn-height {
width:100px;
max-height:250px;
overflow-y:scroll;
}height: opcional – solo para la demostración.
-
Para aquellos que usan Bootstrap 5 y tratan de hacer un desplazamiento
<table>: esta clase no funciona en ella. Tienes que agregar la clase a un elemento div circundante como este<div class="dyn-height"><table>.....– Mikhail Ratner
14 de marzo a las 20:13
intente esto: max-height debería hacer el truco.
html
<div class="height">
blah<br/>
blah<br/>
</div>
CSS:
.height { max-height:250px; border:1px solid red; overflow:auto; }
-
Cuando esto no funciona, ajustar
line-heightayuda stackoverflow.com/questions/10251369/…– Sanghyun Lee
20 de agosto de 2014 a las 21:32
-
Traté de establecer la altura según el tamaño del dispositivo. hay otras posibilidades de corregir la altura máxima en %
– phponwebsites
17 de junio de 2015 a las 6:23
TV-C-1-5
Usar overflow-y con el auto opción. De esta forma, la barra de desplazamiento no aparecerá hasta que se necesite. De lo contrario, se mostrará la barra de desplazamiento, incluso si no necesita que se muestre.
.my_div {
width:100px;
max-height:250px;
overflow-y:auto;
}
simplemente intente max-height y haga overflow-y: desplácese solo
.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>Para aquellos que intentan hacer un desplazamiento <table> con Bootstrap 5:
La respuesta aceptada no funciona en (o dentro) de ella.
.dyn-height {
max-height:250px;
overflow-y:scroll;
}
Tienes que agregar la clase a un elemento div circundante como este
<div class="dyn-height">
<table>
...
</table>
</div>
Quiero que el contenido pequeño tenga una altura pequeña para que una línea no tenga una altura de 250 px. Pero también quiero que el desplazamiento aparezca después de 250px. Espero que tenga sentido !!!
– Salman Virk
17 de febrero de 2011 a las 22:28
Cualquiera que vea esta pregunta ahora debería ir a esta respuesta, ya que es una gran respuesta que es multinavegador y funciona en TODOS los principales navegadores.
– Canicida
3 de febrero de 2017 a las 23:02