martes, 26 de noviembre de 2013

Como evitar el desbordamiento de un div



El desbordamiento de un div viene provocado cuando se le asigna al div una anchura y altura fijas, por ejemplo ...

 #div{
 width: 150px;
 height: 150px;
 border: 1px solid blue;
 }

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".









Para evitar este problema existen dos posibles soluciones a través de la propiedad CSS overflow, la primera de ellas puede ser ocultar el contenido que se sale del div mediante el valor hidden, como puedes ver a continuación ...

 #div{
 overflow: hidden;
 width: 150px;
 height: 150px;
 border: 1px solid blue;
 }

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".

La segunda posibilidad puede ser utilizar el valor scroll, para que muestre un scroll cuando el contenido ocupa más espacio del que las dimensiones del div permite ...

 #div{
 overflow: scroll;
 width: 150px;
 height: 150px;
 border: 1px solid blue;
 }

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".