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:

  1. No está fijando el ancho y la altura y la extensión hasta que aparezca todo el texto.
  2. 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

Respuestas:

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