Muchas veces nos puede ocurrir que al hacer una etiqueta con un tamaño, el contenido de esta sea mayor que el que queramos darle, por lo que la apariencia de la página quede "deformada". Para evitar esto, podemos usar el estilo "overflow" que asigna como se comportará la etiqueta en este caso.
Para darle las medidas (ancho y alto) usaremos los estilos "height" y "width" que pueden recibir su valor en diferentes medidas, que se dividen en dos grandes grupos, las medidas relativas que cuentan con la ventaja de que aprovechan las resoluciones mayores y se puede aprovechar todo el ancho de pantalla, mientras que las posiciones absolutas permiten controlar mas el diseño.
Las medidas relativas:
| px | Valor por defecto, Medida en píxeles, el tamaño cambia para diferentes resoluciones |
| % | Porcentaje, ocupa un el porcentaje dado del tamaño de que dispone la etiqueta |
| em | El tamaño de la fuente definido por "font-size" |
| ex | La altura de la fuente definido por la letra "x" (x-height), esto es valido también para las fuentes sin letra "x", suele ser la mitad que "em", así 2ex = 1em |
| mm | Medida en milímetros |
| cm | Medida en centímetros |
| in | Medida en pulgadas (una pulgada = 2,54 centímetros) |
| pt | Medida en puntos (un punto = 1 / 72 pulgadas) |
| pc | Medida en picas (una pica = 12 puntos) |
| visible | Valor por defecto, la etiqueta se hará tan grande como lo requiera su contenido y sus propiedades |
| hidden | El contenido de la etiqueta que sobrepase el tamaño de la misma no se muestra |
| scroll | La etiqueta dispone siempre de las barras de scroll, hagan falta o no |
| auto | En caso de que el contenido sea mayor que la etiqueta mostrará la barra de scroll necesaria, o bien "arriba - abajo", "izquierda - derecha" o ambas |
| inherit | Heredará el valor del "overflow" que el elemento que lo contiene directamente (elemento padre) |
Código de ejemplo:
<!--Copyright © McAnam.com-->
<div style="width:3cm;height:3cm;overflow:hidden;border:1px solid #ff0000;">
Esta capa tiene unas medidas de 3 centímetros de ancho y otros 3 centímetros de alto.<br>
El contenido que no quepa desaparecerá
</div>
<br><br>
<div style="width:20%;height:1in;overflow:auto;border:1px solid #00ff00;">
Esta capa tendrá una pulgada de alto y un 20% de ancho
del espacio de que disponga en su capa padre.<br>
En caso de que el contenido sea mayor que el tamaño de la capa, mostrará
las barras de scroll.
</div>
<br><br>
<div style="width:300px;height:100pt;overflow:scroll;border:1px solid #0000ff;">
Esta capa ocupará 100 puntos de alto y 300 píxeles de ancho.<br>
Mostrará siempre las dos barras de scroll, las necesite o no.
</div>
En la siguiente página puedes ver varios ejemplos.
Usuarios que han visto este tema también han visto...
- Guia basica de hojas de estilo
- FLOAT en CSS
- 70 ideas para crear mejores CSS
- Ocultar imagenes
- Centrar DIV horizontal en CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.