comparte el articulo 

La propiedad overflow de CSS en la maquetación de páginas web

Actualizado el 12/09/2013 < > 1 Comentario

Resumen: De gran utilidad y poco utilizada, la propiedad CSS2 "overflow" puede resultar de gran utilidad en la maquetación de páginas web.

La aparición de CSS 2 brindó a los diseñadores de páginas web algunos elementos que brindan una mayor ductilidad a la hora de distribuir los contenidos en el diseño. Una de las propiedades introducidas es “overflow”, que posibilita una distribución más eficaz de las capas en el diseño.

En muchas ocasiones, es necesario para mantener ciertas proporciones en el diseño, asignar a las capas (elementos DIV) determinadas dimensiones, tanto en ancho como en altura. Cuando esto sucede, al momento de introducir los contenidos es posible que los mismos excedan las dimensiones asignadas.

Con CSS1, cuando esto sucedía, lo más frecuente era que las capas aumentaran de tamaño hasta cubrir completamente el espacio necesario para los contenidos introducidos. Usualmente, este aumento de tamaño de las capas se produce en la altura.

Para evitar este efecto, en CSS2 se introdujo el atributo “overflow”, que sirve para recortar los contenidos que exceden el tamaño de las capas. Pero también sirve para que, en caso de que se desee que el contenido en exceso sea visible, se agreguen a la capa barras de desplazamiento que permitan que el usuario acceda al resto del contenido y la capa mantenga el tamaño deseado. Los valores que pueden asignarse a este atributo son cuatro:

  • Visible: Este es el valor que tiene por defecto cualquier capa cuyo atributo overflow no se ha enunciado. Cuando se asigna este valor al atributo overflow de una capa, la misma puede tener diferentes comportamientos de acuerdo al navegador del usuario. En los navegadores Firefox, Google Chrome, Opera, Safari, Internet Explorer 7 y 8, la capa mantendrá su tamaño y el contenido desbordará la misma. En cambio, en Internet Explorer 6, la capa aumenta de tamaño hasta cubrir la totalidad de los contenidos ingresados.
  • Hidden: Cuando se da este valor al atributo overflow y los contenidos superan en tamaño a las dimensiones de la capa, los contenidos se recortan al finalizar el tamaño indicado, quedando invisibles el resto de los contenidos. También en este caso, y bajo determinadas circunstancias, Internet Explorer 6 y 7 pueden dar algunos errores. En el resto de los navegadores, funciona correctamente en cualquier circunstancia.
  • Scroll: Este valor de la propiedad overflow, hace que la capa mantenga las dimensiones asignadas, y el contenido se mantiene visible en su totalidad, gracias a que aparecen barras de desplazamiento que permiten desplazarse para tener acceso al resto del contenido que no es visible en la capa. Es importante destacar que, aún en el caso de que los contenidos no superen el tamaño de la capa, las barras de desplazamiento se mostrarán de todas formas.
  • Auto: Al asignarse el valor “auto” (automático), el comportamiento de la capa será similar al que se obtiene al asignar el valor “scroll” en caso de que los contenidos superen el tamaño de la capa, apareciendo las barras de desplazamiento. La diferencia con el valor anterior radica en que, en los casos en que los contenidos no superen el tamaño de la capa, las barras de desplazamiento no aparecen, como si sucede en el caso de asignarse el valor “scroll”.

La utilidad de este atributo es múltiple, y permite un manejo más adecuado de las capas, sobre todo en los casos en que las capas deben tener tamaños determinados para cumplir con los requisitos de un diseño.

Veamos ahora como funcionan cada uno de estos valores. Para el ejemplo siguiente, crearemos cuatro capas iguales con dimensiones definidas, tanto en altura como en ancho, e introduciremos un texto lo suficientemente largo como para que sea superior a dicho tamaño. Crearemos cuatro capas flotantes a la izquierda para que se ubiquen una al lado de la otra.

Para seguir el ejemplo, crearemos dos archivos, el html y el archivo css. Los códigos que deberemos introducir serán los siguientes:

<html>
<head>
<title>Ejemplo overflow</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
  <div id="capa1">
    <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p>
    <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>
  </div>
  <div id="capa2">
    <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p>
    <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>
  </div>
  <div id="capa3">
    <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p>
    <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>
  </div>
  <div id="capa4">
    <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p>
    <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>
  </div>
</body>
</html>

Y luego el archivo CSS:

#capa1, #capa2, #capa3, #capa4 {
  width: 200px;
  height: 200px;
  padding: 5px;
  margin: 5px;
  border: solid 1px #840;
  background: #fca;
  float: left;
  overflow: visible;
  }

#capa2  {
  overflow: hidden;
  }

#capa3  {
  overflow: scroll;
  }

#capa4  {
  overflow: auto;
  }

Si empleamos Internet Explorer 7 u 8, Mozilla Firefox, Google Chrome, Safari u Opera, el resultado deberá ser el siguiente:

Ejemplo en navegadores con CSS según W3C

Mientras tanto, si viéramos la página generada desde un navegador Internet Explorer 6, el resultado sería el siguiente:

Ejemplo en IE6

El ejemplo de Internet Explorer 6 solo lo hemos colocado con la finalidad de mostrar que en algunos casos, es necesario hacer correcciones para este navegador, ya que toma de modo diferente las propiedades CSS y no se basa en el estándar.

En la primera capa, vemos que la misma ha mantenido su tamaño, pero el contenido se desborda de la misma. En el segundo, con el valor “hidden”, vemos que el contenido queda recortado y no es posible acceder al mismo por parte de quien está viendo la página.

En el tercer caso, habiéndose marcado el valor “scroll“, puede apreciarse que la capa mantiene su tamaño y el contenido no se desborda de la capa y pueden verse las barras de desplazamiento horizontal y vertical, aún cuando la barra de desplazamiento horizontal no es necesaria dado que el contenido desborda hacia abajo. En el último caso, con el valor “auto”, la única barra de desplazamiento que aparece es la vertical, ya que la barra de desplazamiento horizontal no es necesaria.

Publicado el 03/09/2010, última actualización 12/09/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

1 Comentario

  1. locker

    Muy buen aporte amigo gracias me salvo la vida

    Viernes, 14 de marzo 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras