La propiedad overflow dentro de CSS
Escrito por J.F. el Miércoles, 26 de Septiembre del 2007 a las 15:00
Enfocado a los novatos y para aquellos que no conocen demasiado CSS, voy a explicar en que consiste la interesante propiedad overflow que podremos aplicar a las capas. Yo generalmente la uso para crear diferentes secciones dentro de una página web en la que queremos meter mucho contenido, y que por falta de espacio o porque nos fastidia el diseño, necesitamos incluirlo en un sitio más pequeño del que ocupa. Para incluir un chat en un lado de tu sidebar, noticias, tablas, etc. Para todo ello uso la propiedad overflow con la opción scroll o auto. Para ver su uso vamos a poner un ejemplo, en el que vamos a definir una capa con un color de fondo(es mejor que sea distinto al del fondo de la página si queremos que se dierencie, aunque en determinadas ocasiones también puede quedar bien dejarlo igual), un ancho y un alto. Veamos el código CSSde nuestra capa de ejemplo:
-
#capa {
-
background: black;
-
width:250px;
-
height:150px;
-
overflow: auto
-
}
Como ves hemos definido overflow auto, de tal manera que si escribimos mucho texto en la capa y sobre pasa las dimensiones aparecerán las barras de scroll facilitándonos el visionado del contenido de la capa. Podríamos haberle dado otros valores, que encuentras explicados en el siguiente recuadro:
overflow: visible Si el contenido de la capa excede sus dimensiones será mostrado igualmente. El comportamiento puede ser variable dependiendo del navegador, por ejemplo en IE6 el contenido entero se muestra con las propiedad que tenía la capa(color de fondo,borde,etc.) mientras que en Firefox el contenido que excede la capa no adquiere esas propiedades, y queda bastante mal.
overflow: hidden De ésta forma la capa se muestra correctamente, unicamente que el contenido que exceda de las dimensiones nunca podrá ser visualizado por el visitante.
overflow: auto Quizás la mejor y más usada, aunque siempre hay que ver las necesidades y requisitos de cada situación. De ésta manera solo aparecerán las barras de scroll en caso de que el contenido exceda las medidas de la capa, posibilitando su lectura.
overflow: scroll Siempre aparecerán las barras de scroll. Si el contenido no excede las dimensiones quedan deshabilitadas, en el momento que es mayor el contenido de habilitan.
Aquí tienes un código de ejemplo bastante simple, utilizando los distintos atributos explicados:
-
-
<style type="text/css">
-
-
#capa1 {background: black; color:yellow; width:250px; height:150px; overflow: auto; border: red 3px dotted}
-
#capa2 {background: black; color:yellow; width:250px; height:150px; overflow: scroll; border: red 3px dotted}
-
#capa3 {background: black; color:yellow; width:250px; height:150px; overflow: hidden; border: red 3px dotted}
-
#capa4 {background: black; color:yellow; width:250px; height:150px; overflow: visible; border: red 3px dotted}
-
-
</style>
-
</head>
-
-
Auto
-
<div id="capa1">
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
</div> <br/>
-
Scroll
-
<div id="capa2">
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
</div> <br/>
-
Hidden
-
<div id="capa3">
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
</div> <br/>
-
Visible
-
<div id="capa4">
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
</div> <br/>
-
-
</body>
-
-
</html>
Categoria: CSS
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
Entradas relacionadas
Comentario de manuel
Realizado el Lunes, 3 de Diciembre del 2007 a las 11:50
Hola,
Gracias por tu explicación.
A mi me gustaría que el overflow pasara a una segunda línea. ¿Eso es posible?
Gracias
Comentario de J.F.
Realizado el Lunes, 3 de Diciembre del 2007 a las 21:07
Mira a ver si ésta solución propuesta en Blogmundi es lo que buscas.
Saludos.
Comentario de Vero
Realizado el Jueves, 31 de Enero del 2008 a las 22:05
Hola
quisiera saber si se le pueden cambiar los colores a las barras del scroll, para que la pagina se siga viendo con diseño.
Gracias
Comentario de J.F.
Realizado el Jueves, 31 de Enero del 2008 a las 22:08
Pues se puede, aunque hasta dodne yo se, solo se ven lso cambios en Internet Explorer. Está explicado por aquí 
Un saludo Vero.
