¿Existe alguna forma de que pueda escribir un valor de css como expresión matemática? Ejemplo:Valor de CSS como expresión matemática
div{
height: 50% + 30px;
width: 40em - 5px;
}
Si lo hay, sería perfecto.
PS: no quiero hacerlo con JS o jQuery.
Puede lograr esto con css3 calc(). Escribir así:
div{
width: 40%;
width: -webkit-calc(40% - 5px);
width: -moz-calc(40% - 5px);
width: calc(40% - 5px);
height:50%;
height: -webkit-calc(50% + 50px);
height: -moz-calc(50% + 50px);
height: calc(50% + 50px);
background: green;
color: white;
position:absolute;
}
Marque esta http://jsfiddle.net/3QUw6/
Comprobar esta discusión para más Is it possible to make a div 50px less than 100% in CSS3?
No se puede hacer esto con CSS, pero se podía (y mucho más) con un preprocesador de CSS, como LESS, SASS o mi favorito Stylus. El resultado final es simple CSS antiguo, pero debe compilarse primero.
No lo sabía. Parece muy útil. –
Lo primero que me viene a la mente es menos pero, si el tamaño del elemento depende del contenido, entonces menos podría adivinar el tamaño correcto, por lo que no es válido en algunos casos particulares, aparte de eso, sería una Solución perfecta. Pero para esto, CSS3 es mejor. –
Tanto padding como margin se pueden usar para agregar dimensiones a los objetos. Le sugiero que lea en el box model.
HTML:
<div id="container">
<div class="wrapper">
<div>...</div>
</div>
</div>
CSS:
.wrapper {
width: 40em;
height: 50%;
padding: 15px 0; /* Top and bottom padding of 15px */ }
/* Block-level element will take up 100% of the
container width, minus {margin_right} + {marign_left} */
.wrapper > div { margin: 0 0 0 5px; }
Tome un vistazo a calc() función en CSS. Esperemos que el soporte para esto aumente en los navegadores.
Por qué no usar Javascript? – Wex
Estoy tratando de hacerlo para cualquier tipo de tamaño de ventana. Si planeo escribirlo en js, debería escribir las funciones '.ready()' y '.resize()' que no quiero hacer. –