La propiedad overflow en CSS

Anterior
Avanzar

Esta es la lección en la que conoceremos y aprenderemos a utilizar la propiedad overflow; una propiedad CSS muy importante para el control de contenido excedente de elementos y contenedores. Mediante un poco de teoría y varios ejemplos prácticos te ayudaré a entender qué es, para qué sirve y cómo es que funciona esta propiedad.

Para qué sirve la propiedad overflow de CSS

Para responder la pregunta quiero que te pongas a pensar en la infinidad de posibilidades que tenemos para dimensionar un elemento o contenedor, son tantas posibilidades que en ocasiones existen elementos hijos que exceden la dimensión de sus elementos padre.

Entonces ¿Qué sucede cuando por alguna razón el elemento hijo sobrepasa los bordes de su elemento padre? Pues simplemente se desborda, se excede y es poco práctico, es ahí donde entra en juego el poder de la propiedad overflow.

Así se ve cuando el elemento hijo excede las dimensiones del elemento padre:

Overflow permite mantener visible el excedente, ocultar, o crear barras de desplazamiento sobre el contenedor del que excede.

Valores para la propiedad overflow

  • visible.- es el valor por defecto y hace que todo sea visible, aunque el contenido este desbordado.
  • hidden.- hace que el contenido excedente se oculte.
  • scroll.- El contenido ingresa al contenedor sin desbordarse, pero aparecen las barras de desplazamiento horizontal y vertical para visualizar el contenido.
  • auto.- automáticamente aparecen las barras de desplazamiento siempre y cuando sean necesarias, el contenido no se desborda, ingresa en su contenedor.
  • inherit.- hereda el estilo del elemento padre.

Ejemplos de overflow en CSS

Código HTML

<div class="contenedor">
  <p class="contenido">Este es un párrafo para probar la propiedad Overflow de CSS, por ello necesitamos que este párrafo sobrepase los límites del contendor en el que se encuentra, de tal manera que podamos observar como es que los valores de overflow influyen en el comportamiento de los contenidos excedentes, ya sabemos cuáles son los valores y cómo estos afectan, pero no está demás verlos visualmente y en tu caso aplícalo en tu proyecto para explorar de primera mano...</p>

Código CSS

div.contenedor {
  width:200px;
  height: 200px;
  margin:40px;
  padding: 15px;
  background-color:#76e37f;
  border: 1px solid #aaa;
  overflow:scroll;
}




Resultado de propiedad overflow con valor scroll:

Te recomendamos leer:  Posicionamiento en CSS

Observa cómo aparecen las barras de desplazamiento tanto en la parte inferior como al lado derecho del contenedor, de tal manera que ahora se puede deslizar para descubrir el contenido que no quepa en el contenedor.

Resultado cuando se aplica otros valores:

Ahora veamos los resultados obtenidos en el mismo ejemplo anterior cuando se aplica otros valores para overflow.

Resultado para overflow:visible;

Resultado para overflow:hidden;

Resultado para overflow:auto;

Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos