ancho de css: calc (100% -100px); alternativa usando jquery

Me gustaría usar width: calc(100% -100px); que hace el trabajo perfectamente para lo que lo necesito, el único problema es su compatibilidad. Por el momento, solo funciona en los últimos navegadores y no funciona en Safari.

¿Podría hacer una alternativa usando jQuery? es decir. obtener el 100% de ancho de un objeto -100px y luego establecer dinámicamente el resultado como el ancho de CSS (para que sea receptivo)

Si tiene un navegador que no admite la expresión de calc , no es difícil imitarlo con jQuery:

 $('#yourEl').css('width', '100%').css('width', '-=100px'); 

Es mucho más fácil dejar que jQuery maneje el cálculo relativo que hacerlo usted mismo.

Creo que esto puede ser de otra manera

  var width= $('#elm').width(); $('#element').css({ 'width': 'calc(100% - ' + width+ 'px)' }); 

100% -100px es lo mismo

 div.thediv { width: auto; margin-right:100px; } 

Con jQuery:

 $(window).resize(function(){ $('.thediv').each(function(){ $(this).css('width', $(this).parent().width()-100); }) }); 

Una forma similar es usar el plugin jQuery resize

Pruebe el método jQuery animate() , ej.

 $("#divid").animate({'width':perc+'%'}); 

No es tan difícil de replicar en javascript :-), aunque solo funcionará para ancho y alto, pero puedes expandirlo según tus expectativas 🙂

 function calcShim(element,property,expression){ var calculated = 0; var freed_expression = expression.replace(/ /gi,'').replace("(","").replace(")",""); // Remove all the ( ) and spaces // Now find the parts var parts = freed_expression.split(/[\*+-\/]/gi); var units = { 'px':function(quantity){ var part = 0; part = parseFloat(quantity,10); return part; }, '%':function(quantity){ var part = 0, parentQuantity = parseFloat(element.parent().css(property)); part = parentQuantity * ((parseFloat(quantity,10))/100); return part; } // you can always add more units here. } for( var i = 0; i < parts.length; i++ ){ for( var unit in units ){ if( parts[i].indexOf(unit) != -1 ){ // replace the expression by calculated part. expression = expression.replace(parts[i],units[unit](parts[i])); break; } } } // And now compute it. though eval is evil but in some cases its a good friend. // Though i wish there was math. calc element.css(property,eval(expression)); } 

Si desea usar calc en su archivo CSS, use un relleno como PolyCalc . Debe ser lo suficientemente ligero como para funcionar en navegadores móviles (por ejemplo, debajo de iOS 6 y de teléfonos con Android 4.4).