css宽度：calc（100％-100px）; 替代使用jQuery
我想使用width: calc(100% -100px); 完美地完成了我所需要的工作，唯一的问题是它的兼容性。 目前它只能在最新的浏览器中运行，而在Safari中则完全不能运行。
我可以使用jQuery替代吗？ 即。 获得-100px的对象的100％宽度，然后dynamic地将结果设置为CSS宽度（所以它将是响应的）
如果你有一个不支持calcexpression式的浏览器，用jQuery来模拟是不难的：
$('#yourEl').css('width', '100%').css('width', '-=100px');
让jQuery处理相对计算比自己做更容易。
100％-100px是一样的
div.thediv { width: auto; margin-right:100px; }
使用jQuery：
$(window).resize(function(){ $('.thediv').each(function(){ $(this).css('width', $(this).parent().width()-100); }) });
类似的方法是使用jQuery的大小调整插件
我想这可能是另一种方式
var width= $('#elm').width(); $('#element').css({ 'width': 'calc(100% - ' + width+ 'px)' });
试试jQuery animate()方法，例如。
$("#divid").animate({'width':perc+'%'});
它不难复制的JavaScript :-)，虽然它只会在宽度和高度最好的，但你可以扩大它，根据您的期望:-)
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)); }
如果你想在你的CSS文件中使用calc，可以使用PolyCalc这样的polyfill 。 应该足够轻，可以在移动浏览器上工作（例如，在iOS 6和以下的Android 4.4手机下）。
