Question

我正在开展一个项目，主要内容计算如下：

$ content-height：calc（100vh - 50px - 62px）;

在内容中我有一个表格，其高度计算如下：

File.Copy(@"C:\yourCorrectFilePath\App.Config", @"...\TestProgram\bin\Debug\App.Config", true); Process process = new Process(); process.StartInfo.UseShellExecute = false; process.StartInfo.FileName = @"...\MainProgram.exe"; process.StartInfo.CreateNoWindow = false; process.StartInfo.WorkingDirectory = @"...\TestProgram\bin\Debug"; process.Start();

Chrome中的

输出为：

height: calc(#{$content-height} - 62px - 50px/2 - 66.1px);

它工作正常。

在Internet Explorer（11）中，这不起作用。当我删除内部height: calc(calc(100vh - 50px - 62px) - 62px - 50px/2 - 66.1px);时： calc

它工作正常。

我在网上搜索了这个主题的答案，但没有找到。任何帮助将不胜感激

Answer 1

显然，这个应该有效（https://stackoverflow.com/a/36414853/1869660），但由于它没有，你可以创建一个SASS函数来帮助创建有效的calc表达式：

//https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return
            str-slice($string, 1, $index - 1) + 
            $replace + 
            //Recursively replace the rest of the string:
            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function calced($expressions...) {
    $result: "";
    @each $x in $expressions {
        @if (str-length($result) > 0) {
            $result: $result + " + ";
        }
        $result: $result + str-replace(#{$x}, "calc", "");
    }
    $result: str-replace($result, "+ -", "- ");
    @return unquote("calc(" + $result + ")");
}

用法：

$content-height: calc(100vh - 50px - 62px);
//..or $content-height: calced(100vh ,-50px ,-62px);

.test {
    height: calced($content-height/2, -60px, 20%, "-20vh/3");
}

示例：http://codepen.io/Sphinxxxx/pen/NbZLqd?editors=0100

用计算变量计算css

1 个答案: