Hacer que un div se desplace verticalmente usando CSS
Esto
<div id="" style="overflow:scroll; height:400px;">Da un div que el usuario puede desplazarse tanto horizontal como verticalmente. ¿Cómo lo cambio para que el div sea solo desplazable verticalmente?
7 answers
Lo tienes cubierto aparte de usar la propiedad incorrecta. La barra de desplazamiento se puede activar con cualquier propiedad overflow, overflow-x, o overflow-y y cada uno se puede establecer a cualquiera de visible, hidden, scroll, auto, o inherit. Actualmente estás viendo estos dos:
auto- Este valor se verá en el ancho y la altura de la caja. Si se definen, no permitirá que la caja se expanda más allá de esos límites. En su lugar (si el contenido excede esos límites), creará una barra de desplazamiento para cualquiera límite (o ambos) que excede su longitud.scroll- Este valor fuerza una barra de desplazamiento, sin importar qué, incluso si el contenido no excede el conjunto de límites. Si el contenido no necesita ser desplazado, la barra aparecerá como "deshabilitada" o no interactiva.
Si siempre quiere que aparezca la barra de desplazamiento vertical:
Debe usar overflow-y: scroll. Esto obliga a a que aparezca una barra de desplazamiento para el eje vertical si es necesario o no. Si en realidad no puede desplazarse por el contexto, aparecerá como una barra de desplazamiento"desactivada".
Si solo desea que aparezca una barra de desplazamiento si puede desplazarse por la caja:
Simplemente use overflow: auto. Dado que su contenido por defecto solo se rompe a la siguiente línea cuando no puede caber en la línea actual, no se creará una barra de desplazamiento horizontal (a menos que esté en un elemento que tenga el ajuste de palabras deshabilitado). Para la barra vertical,permitirá que el contenido se expanda hasta la altura que ha especificado. Si excede esa altura, mostrará una barra de desplazamiento vertical para ver el resto del contenido, pero no mostrará una barra de desplazamiento si no excede la altura.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-18 19:29:58
Intenta así.
<div style="overflow-y: scroll; height:400px;">Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-20 17:49:11
Para una altura de visualización del 100% use:
overflow: auto;
max-height: 100vh;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-21 12:43:37
Use overflow-y: auto; en el div.
También, debe establecer el ancho también.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-14 17:59:37
Puede usar este código en su lugar.
<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">
overflow-x: La propiedad overflow - x especifica qué hacer con los bordes izquierdo/derecho del contenido, si se desborda el área de contenido del elemento.
overflow-y: La propiedad overflow - y especifica qué hacer con los bordes superior/inferior del contenido, si se desborda el área de contenido del elemento.
Valores
visible: Valor predeterminado. El contenido no está recortado, y puede ser renderizado fuera el cuadro de contenido.
hidden: El contenido está recortado y no se proporciona ningún mecanismo de desplazamiento.
scroll: Se recorta el contenido y se proporciona un mecanismo de desplazamiento.
auto: Debe hacer que se proporcione un mecanismo de desplazamiento para las cajas desbordantes.
initial: Establece esta propiedad en su valor predeterminado.
inherit Hereda esta propiedad de su elemento padre.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-15 12:55:26
Puede usar overflow-y: scroll para el desplazamiento vertical.
<div style="overflow-y:scroll; height:400px; background:gray">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-24 10:28:44
El problema con todas estas respuestas para mí era que no respondían. Tuve que tener una altura fija para un div padre que no quería. Tampoco quería pasar un montón de tiempo merodeando con consultas de medios. Si está utilizando angular, puede usar bootstraps tabset y hará todo el trabajo duro por usted. Usted será capaz de desplazarse por el contenido interno y será sensible. Cuando configures la pestaña, hazlo así: $scope.tab = { title: '', url: '', theclass: '', ative: true };... el punto es que no quieres un título o una imagen icono. luego oculte el contorno de la pestaña en cs de esta manera:
.nav-tabs {
border-bottom:none;
}
Y también esto .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}
y finalmente para eliminar la pestaña invisible en la que todavía puedes hacer clic si no implementas esto: .nav > li > a {padding:0px;margin:0px;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-10 21:26:46