overflow-y

Sumario

La propiedad  overflow-y define si se debe de cortar el contenido, mostrar una barra scroll, o mostrar el contenido desbordado  de un elemento cuando se desborda de arriba y abajo.

Sintaxis

/* El contenido no es recortado */
overflow-y: visible;

/* El contenido es recortado sin mostrar barra scroll */
overflow-y: hidden;

/* El contenido es recordado, mostrando barra scroll */
overflow-y: scroll;

/* Deja al navegador decidir */
overflow-y: auto;

overflow-y: inherit;

Valores

visible

El contenido no es recortado.

hidden

El contenido es recortado sin mostrar barra scroll.

scroll

El contenido es recortado y los navegadores de computadoras utilizan barras scroll, ya sea que existe contenido desbordado o no. Esto con el objetivo de evitar problemas con barras apareciendo y desapareciendo en un entorno dinámico. Las impresoras pueden imprimir el contenido desbordado.

auto

Depende del navegador. Navegadores como Firefox para escritorio proveen barras scroll cuando el contenido se desborda.

Sintaxis Formal

visible | hidden | scroll | auto

Ejemplo

HTML

<ul>
  <li><code>overflow-y:hidden</code> — Esconde el texto fuera de la caja
  <div id="div1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:scroll</code> — Agrega una barra scroll si se necesita
  <div id="div2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:visible</code> — Muestra el texto fuera de la caja si se necesita
  <div id="div3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:auto</code> — En la mayoría de los navegadores, equivalente a <code>scroll</code>
  <div id="div4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>
  

CSS

#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width:  250px;
  height: 100px;
}

#div1 { overflow-y: hidden; margin-bottom: 12px;}
#div2 { overflow-y: scroll; margin-bottom: 12px;}
#div3 { overflow-y: visible; margin-bottom: 120px;}
#div4 { overflow-y: auto; margin-bottom: 120px;}

Resultado

Especificaciones

Compatibilidad con Navegadores

[*] IE8 introduced -ms-overflow-y as a synonym for overflow-y. Don't use the -ms- prefix.

Ver también

• Propiedades CSS relevantes: text-overflow, white-space, overflow, overflow-x, clip, display