CSS: barras de desplazamiento

Puede darse el caso de que el contenido de un elemento sea mayor que la cantidad de espacio asignada. Por ejemplo, las propiedades de ancho y alto dadas no permiten suficiente espacio para acomodar el contenido del elemento.

CSS proporciona una propiedad llamada overflow que le dice al navegador qué hacer si el contenido del cuadro es más grande que el propio cuadro. Esta propiedad puede tomar uno de los siguientes valores:

No Señor.	Valor y descripción
1	visible Permite que el contenido desborde los bordes de su elemento contenedor.
2	hidden El contenido del elemento anidado simplemente se corta en el borde del elemento contenedor y no hay barras de desplazamiento visibles.
3	scroll El tamaño del elemento contenedor no cambia, pero las barras de desplazamiento se agregan para permitir al usuario desplazarse para ver el contenido.
4	auto El propósito es el mismo que el de desplazamiento, pero la barra de desplazamiento se mostrará solo si el contenido se desborda.

Aquí hay un ejemplo:

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>

Producirá el siguiente resultado:

↰ Previous page Next page ↱