Cómo usar bien la fórmula calc en CSS3 y la importancia del espacio


Hoy un truco rápido que me ha hecho perder un buen rato en una app de Windows 8, suerte que se me ha ocurrido buscar en MSDN.

A veces vamos a necesitar que un elemento nos ocupe un porcentaje de la página/aplicación, pero dejando libre un cierto margen de pixels.

Hay muchas formas de hacerlo, pero en el caso que tenía hoy necesitaba asignar un margen de 20px y un tamaño del elemento al 100% para que cubriera todo el espacio restante del contenedor.
Las propiedades de estilo margin y padding no se llevan demasiado bien con asignaciones a height y width en formato de porcentaje, el 100% calculado seguirá siendo el total del espacio del contenedor sin el margen. Así que necesitamos realizar un cálculo entre el valor del porcentaje y la cantidad de pixels que estamos utilizando en los margenes. Para esto no hace falta código JavaScript, pues tenemos la función calc que permite hacer exactamente eso en CSS, pero tenemos que ir con mucho cuidado al escribirla, busca las diferencias:

Código erróneo:

.homepage section[role=main] {
    margin-top:20px;
    height:calc(100%-20px);
}

Código correcto:

.homepage section[role=main] {
    margin-top:20px;
    height:calc(100% - 20px);
}

La diferencia es sutil pero importante: entre el 100%, 20px y el símbolo de restar, en un caso no hay espacios y en el código que funciona sí. Es muy fácil olvidar los espacios y si no los ponemos no pasará nada, nada de nada, pues, tal como dicta la norma, un atributo css inválido es ignorado.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s