CSS 宽度：计算（100% -100px）；使用 jquery 的替代方法答案

【问题标题】：css width: calc(100% -100px); alternative using jqueryCSS 宽度：计算（100% -100px）；使用 jquery 的替代方法
【发布时间】：2012-06-22 10:50:09
【问题描述】：

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

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

【问题讨论】：

这样搭配jquery使用 $('#dataElement').css({'width':'calc(100% -100px)'});

标签： jquery css

【解决方案1】：

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

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

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

【讨论】：

http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/
@odiszapc add $(window).resize(function() { /* put the jquery calc code here */ }); 所以它会在窗口调整大小时自动计算宽度。
我知道。请参阅下面的答案
这种方式有一个小问题。当我改变页面的宽度时，#yourEl 的宽度没有改变，它是恒定的。
以防其他人对格式有疑问，'=' 和值之间不能有空格。所以-= 100px不行，一定是-=100px。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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 plugin

【讨论】：

在上面的例子中，如果项目是position:absolute; top:0; left:0; ，那会起作用吗
一直在玩它，在你的 js 中，它在第 2 行 $(window) 行 <script type="text/javascript"> $(window).resize(){ $('#supersized').each(function(){ $(this).css('width', $(this).parent().width()-100); }) } </script> 上出现错误
如果是width:90%; margin-right:-100px;，你会使用css示例吗

【解决方案4】：

试试 jQuery animate() 方法，例如

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

【讨论】：

我实际上正在尝试将动画与上述 calc 函数一起使用，但遇到了麻烦：$('#button-sidebar').animate({width: calc(50% + 20px)},400);
我不认为您可以使用 jQuery 为 calc Css 变量设置动画。你可以在同一个动作中同时为'width', '100%' 和'width', '-=100px' 设置动画，它会做你想做的事。

【解决方案5】：

在 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));
}

【讨论】：

需要一个使用例子。

【解决方案6】：

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

【讨论】：