HTML: ¿Cómo crear un DIV con solo barras de desplazamiento vertical para párrafos largos?

136

Quiero mostrar una nota de términos y condiciones en mi sitio web. No quiero usar el campo de texto y tampoco quiero usar toda mi página. Solo quiero mostrar mi texto en el área seleccionada y quiero usar solo la barra de desplazamiento vertical para bajar y leer todo el texto.

Actualmente estoy usando este código:

<div style="width:10;height:10;overflow:scroll" >
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
</div>

Dos problemas:

No está fijando el ancho y la altura y la extensión hasta que aparezca todo el texto.
En segundo lugar, muestra una barra de desplazamiento horizontal y no quiero mostrarla.

css html overflow

— Awan
fuente

El problema de ancho / alto se resuelve con "Daniel Vassallo" y el problema de la barra de desplazamiento horizontal se resuelve con "janmoesen". Ahora, ¿quién responde si debo aceptar :) puedo seleccionar múltiples;)

— Awan

238

Uso overflow-y. Esta propiedad es CSS 3.

— janmoesen
fuente

El problema de ancho / alto se resuelve con "Daniel Vassallo" y el problema de la barra de desplazamiento horizontal se resuelve con "janmoesen". Ahora, ¿quién responde si debo aceptar :) puedo seleccionar múltiples;)

— Awan

21

Eso es bastante obvio: siempre vaya por el desvalido, es decir, el que tenga la reputación más baja. ;-)

— janmoesen

jajaja. Pero su respuesta no está en detalle a partir de "Daniel Vassallo" :)

— Awan

Me esfuerzo por "menos es más" y dejo que los enlaces hablen. De todos modos, ¡solo elige uno y ten un buen fin de semana!

— Janmoesen

14

Creo que el estándar aquí es no responder una pregunta con "solo" un enlace, ya que los enlaces pueden volverse inválidos. Debe incluir suficiente información para responder la pregunta directamente en su respuesta, y luego tener el enlace como referencia.

— Jeffrey Harmon

66

para ocultar las barras de desplazamiento horizontales, puede configurar overflow-x como oculto, de esta manera:

overflow-x: hidden;

— Kornelius
fuente

Siento que esta es la respuesta que quería el autor de la pregunta ... te mereces más crédito

— Ian Wise

52

Debe especificar el widthy heighten px:

width: 10px; height: 10px;

Además, puede usar overflow: auto;para evitar que se muestre la barra de desplazamiento horizontal.

Por lo tanto, puede intentar lo siguiente:

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>

— Daniel Vassallo
fuente

El ancho y la altura funcionan ahora, pero la barra de desplazamiento horizontal aún no se ha eliminado.

— Awan

El problema de ancho / alto se resuelve con "Daniel Vassallo" y el problema de la barra de desplazamiento horizontal se resuelve con "janmoesen". Ahora, ¿quién responde si debo aceptar :) puedo seleccionar múltiples;)

— Awan

19

Gracias primero

Usarlo overflow:autome funciona.

La barra de desplazamiento horizontal desaparece.

— raji
fuente

15

Para cualquier caso establecido overflow-xen hiddeny prefiero configurarlo max-heightpara limitar la expansión de la altura del div. Su código debería verse así:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;

— Brane
fuente

13

Para mostrar la barra de desplazamiento vertical en su div, debe agregar

height: 100px;   
overflow-y : scroll;

o

height: 100px; 
overflow-y : auto;

— Ricardo Romo
fuente

2

Yo prefiero usar max-height: 100px;.

— Roman

Debido a mi configuración, era heightque faltaba, por lo que no se muestran las barras de desplazamiento vertical, aunque height:100%;funcionó mejor para mí.

— SharpC

3

overflow-y : scroll;
overflow-x : hidden;

height es opcional

— Amobi Chuks
fuente

2

Puede usar la propiedad de desbordamiento

style="overflow: scroll ;max-height: 250px; width: 50%;"

— Sunil Kumar
fuente

1

También enfrenté el mismo problema ... intente hacer esto ... esto funcionó para mí

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }

— singhkumarhemant
fuente

0

Esta es mi mezcla:

overflow-y: scroll;
height: 13em; // Initial height.
resize: vertical; // Allow user to change the vertical size.
max-height: 31em; // If you want to constrain the max size.

— Daniel De León
fuente