html - horizontally - Haciendo un div verticalmente desplazable usando CSS

vertical align css

Question

Esta

<div id="" style="overflow:scroll; height:400px;">

proporciona un div que el usuario puede desplazar tanto horizontal como verticalmente. ¿Cómo lo cambio para que la div sea solo desplazable verticalmente?

Answer 1

El problema con todas estas respuestas para mí fue que no respondían. Tenía que tener una altura fija para un div padre que no quería. Tampoco quería gastar un montón de tiempo buscando información en los medios. Si está usando angular, puede usar bootstraps tabset y hará todo el trabajo duro por usted. Podrás desplazarte por el contenido interno y será sensible. Cuando configure la pestaña, hágalo así: $scope.tab = { title: '''', url: '''', theclass: '''', ative: true }; ... el punto es que no quieres un título o un icono de imagen. luego oculta el contorno de la pestaña en cs así:

.nav-tabs {
   border-bottom:none; 
} 

y también este .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} y finalmente eliminar el pestaña invisible en la que aún puedes hacer clic si no implementas esto: .nav > li > a {padding:0px;margin:0px;}

Answer 2

Intenta de esta manera.

<div style="overflow-y: scroll; height:400px;">

Answer 3

Lo tienes cubierto aparte de usar la propiedad equivocada. La barra de desplazamiento se puede activar con cualquier overflow propiedad, overflow-x o overflow-y y cada uno puede configurarse como visible , hidden , scroll , auto o inherit . Actualmente estás mirando estos dos:

• auto : este valor se verá en el ancho y alto del cuadro. Si están definidos, no permitirá que la caja se expanda más allá de esos límites. En cambio (si el contenido excede esos límites), creará una barra de desplazamiento para cualquiera de los límites (o ambos) que exceda su longitud.

• scroll : estos valores obligan a una barra de desplazamiento, sin importar qué, incluso si el contenido no excede el límite establecido. Si no es necesario desplazar el contenido, la barra aparecerá como "deshabilitada" o no interactiva.

Si siempre quieres que aparezca la barra de desplazamiento vertical:

Debes usar overflow-y: scroll . Esto hace que aparezca una barra de desplazamiento para el eje vertical, ya sea que se necesite o no. Si no puede desplazar el contexto, aparecerá como una barra de desplazamiento "deshabilitada".

Si solo desea que aparezca una barra de desplazamiento si puede desplazarse por el cuadro:

Sólo tiene que utilizar overflow: auto . Debido a que su contenido por defecto simplemente pasa a la siguiente línea cuando no puede encajar 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 texto 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.

Answer 4

Para el uso de la altura de la ventana gráfica al 100%:

overflow: auto;
max-height: 100vh;

Answer 5

Puede usar overflow-y: scroll para 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>

Answer 6

Puede utilizar 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 se recorta, y se puede representar fuera del cuadro de contenido.
oculto : el contenido se recorta y no se proporciona ningún mecanismo de desplazamiento.
scroll : el contenido se recorta y se proporciona un mecanismo de desplazamiento.
auto : debe hacer que se provea un mecanismo de desplazamiento para los cuadros desbordados.
inicial : establece esta propiedad a su valor predeterminado.
heredar Hereda esta propiedad de su elemento padre.

Answer 7

Use overflow-y: auto; en la div.

Además, debe establecer el ancho también.