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

Visible
hidden
scroll
auto

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.

Si estás viendo esta página con un navegador compatible comprobarás que puedes cambiar el ancho y alto de este cuadro, y el texto se reordena para ser visible. Todo esto es controlable claro está, mediante CSS3

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>

Ahora puedes probar a ampliar la caja más allá del margen de esta sección, verá que no puedes. Al alcanzar el valor de anchura máxima el desplazamiento se bloquea.

 

El redimensionado interactivo de los contenedores es muy útil en lso controles textarea de los formularios.