La propiedad overflow de CSS en la maquetación de páginas web
(2 votos, promedio: 5,00 de 5)
Cargando...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 versatilidad 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.
- 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.
- 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, eum fastidii accumsa.</p>
<p>Ius id vidit volumus mandamus, vide veritus democritum te nec.</p>
</div>
<div id="capa2">
<p>Lorem ipsum ad his scripta blandit accumsan euripidis in, eum liber.</p>
<p>Ius id vidit volumus mandamus, vide veritus democritum te nec.</p>
</div>
<div id="capa3">
<p>Lorem ipsum ad his scripta fastidii accumsan euripidis in.</p>
<p>Ius id vidit volumus mandamus, vide veritus democritum.</p>
</div>
<div id="capa4">
<p>Lorem ipsum ad his scripta blandit.</p>
<p>Ius id vidit volumus mandamus, vide veritus.</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:
Mientras tanto, si viéramos la página generada desde un navegador Internet Explorer 6, el resultado sería el siguiente:
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. Pero desde luego, a día de hoy no tienes que preocuparte por versiones inferiores a IE11.
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.
3 respuestas
Buena página, explicativa y práctica para los que empezamos, gracias.
Me alegro User!
Ese es el objetivo :)
Un saludo.
Muy buen aporte amigo gracias me salvo la vida