55

我想使用width: calc(100% -100px);which 完美地完成我需要的工作，唯一的问题是它的兼容性。目前它只适用于最新的浏览器，根本不适用于 Safari。

我可以使用 jQuery 替代吗？IE。获取对象的 100% 宽度 -100px，然后将结果动态设置为 CSS 宽度（因此它会响应）

4

6 回答 6

115

如果你的浏览器不支持calc表达式，用 jQuery 模仿也不难：

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

让jQuery处理相对计算比自己做要容易得多。

于 2012-06-20T10:10:24.723 回答
26

我认为这可能是另一种方式

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

    $('#element').css({ 'width': 'calc(100% - ' + width+ 'px)' });
于 2014-09-29T14:19:24.543 回答
18

100%-100px 是一样的

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

使用 jQuery：

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

类似的方法是使用jQuery resize 插件

于 2012-06-20T10:10:52.373 回答
1

尝试 jQueryanimate()方法，例如。

$("#divid").animate({'width':perc+'%'});
于 2012-06-20T10:17:36.417 回答
1

在 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));
}
于 2013-06-15T13:27:58.033 回答
1

如果您想在 CSS 文件中使用 calc ，请使用 PolyCalc 之类的polyfill。应该足够轻，可以在移动浏览器上工作（例如低于 iOS 6 和低于 Android 4.4 的手机）。

于 2014-03-20T22:27:51.123 回答