Hoy vamos a volver a ver un poquito de hojas de estilo, que siempre viene bien. Queremos aclarar el uso de una serie de propiedades que pueden ser de gran utilidad a la hora de desarrollar un site, sobre todo si lo vamos a programar para que cargue contenido dinámicamente.
Las propiedades que vamos a ver son max-height, min-height, max-width y min-width, que corresponden a las especificaciones de CSS2 de la W3C. Se tratan de propiedades para controlar el tamaño máximo y mínimo que puede adoptar un elemento.
Propiedad max-width y max-height
Estas propiedades sirven para decirle a un elemento el ancho y alto máximo que puede alcanzar. Esto significa que si tenemos, por ejemplo, una capa que no queramos que sobrepase un alto determinado porque nos descuadra la web, podemos especificarle ese alto. Su sintaxis, atendiendo al caso, sería:
#capa{
max-width:500px;
max-height:100px;
}Los valores se pueden poner en unidades o porcentajes, según nos convenga.
Propiedad min-width y min-height
Si con las propiedades anteriores controlábamos el tamaño máximo de un elemento, con estas controlamos el tamaño mínimo. Nos puede servir para mantener el tamaño mínimo de una capa si el contenido es variable y de vez en cuando la capa queda demasiado pequeña.
#capa{
min-width:500px;
min-height:100px;
}Como en el caso anterior, los valores se pueden poner en unidades o porcentajes.
Hay que tener en cuenta que si a una capa le hemos puesto un tamaño máximo y el contenido de su interior es superior a este tamaño, dicho contenido se saldrá de la capa. Para controlar esto deberemos usar la propiedad overflow, de la que hablaremos en otro artículo.
Deja una respuesta