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

Question

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 responda)

Answer 1

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

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

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

Answer 2

100% -100px es el mismo

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

con jQuery:

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

manera similar es utilizar jQuery resize plugin

Answer 3

Trate jQuery animate() método, ex.

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

Answer 4

No es tan difícil de replicar en javascript :-), aunque sólo funcionará para la anchura y la altura de los mejores, pero se puede expandirlo según sus 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)); 
} 

Answer 5

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

Answer 6

Creo que esto puede ser otra forma

var width= $('#elm').width(); 

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