Cajas y contenido
Una elemento de una página web que contenga otros elementos (un contendor o caja ) debe estar definida con las dimensiones adecuadas, pero esto no siempre es posible.
CSS ofrece reglas para hacer frente a estas situaciones. Para textos tiene la regla complementaria text-overflow que permite recortar o situar una elipsis para lineas muy largas. Y para situaciones más generales ofrece las reglas overflow con la que podemos optar por sitintas opciones cuando el contenido es demasido grande
- visible - Es el valor por defecto, el contenido sobre pasa los límites del contenedor
- hidden - En este caso la proción que no cabe queda oculta
- scroll - Se muestran barras de scroll
- auto - Es un scroll automático
Nada mejor que verlo en funcionamiento. Tenemos una caja de 80x160px en la que se ha metido una imagen de 110x134px. Observa la diferencia entre los scroll y auto, en auto solo pone el scroll vertical el horizontal no es necesario
Ten en cuenta que las barras de scroll disminuyen el tamaño disponible para el contenido. En la primera opción el contenido se sale de la caja, pero no desplaza a los demás elementos, queda como por encima de la hoja.
Al utilizar tamaños debes tener muy en cuenta el diseño responsive.
Una tamaño absoluto puede fallar al verlo en un móvil, mejor usa tamaños relativos (porcentajes o unidades relativas)
Interacción Tamaños variables
Ya has visto como puedes definir la estrategia que debe seguir el navegador ante contenidos más grandes que el continente. Pero CSS3 te da una opción extra: permite que el usuario cambie el tamaño de un contnedor CSS.
Para ello se utliza la propiedad resize. Es un complemento de overflow, por tanto para usar esta propiedad debe estar también definida overflow, habitualmente con un valor auto. en estas condiciones se mostrará una esqueina interactiva en la caja y con el raton la caja podrá se escalada a gusto del usuario. Este es un efecto interesante pero que debe usarse con cuidado, pues puede destrozar el diseño de una página. Es muy útil en formularios para controles tipo textarea.
Por ejemplo
.caja
{
resize:both;
overflow:auto;
border: solid thin black;
}
Como ves en la esquina inferior derecha del bloque se ve una esquina diferente,clickable, que cpuede ser arrastrada mediante el ratón con el botón izquierdo pulsado.
Los valores que puede tomar resize son
- none: tamaño fijo.
- both : se puede modificar el ancho y el alto
- horizontal: solo puede ensancharse o estrecharse
- vertical: se puede variar la altura
Puedes controlar el tamaño máximo de altura y anchura con las propiedades max-width, min-width y max-height, min-height
.caja{
resize:both;
max-width: 600px;
width: 400px;
max-height: 700px;
overflow:auto;
border: solid thin black;
}
<div class="caja">Ahora puedes probar a ampliar....</div>