JavaScriptで2つの文字列を結合して 'calc（）'の値を設定すると、

Question

これは私の問題の裸の例ですが、基本的な問題は残ります：blue要素は3行目JavaScriptは動作しません。この要素の値heightに連結するための変数と文字列があります。 red要素が正しくレンダリングされますが、このような値を連結すると青要素が機能しないのですが、どうすれば修正できますか？

blue.style.height = 'calc(100% -' + '2rem)'; 

この行は機能しません。

注：要素の計算値内で複数の変数と値を連結する必要があります。複数の値を組み合わせて文字列を維持しながら、これを動作させるにはどうすればよいですか？

var red = document.querySelector('.red'), 
 
    green = document.querySelector('.green'), 
 
    blue = document.querySelector('.blue'); 
 

 
red.style.height = 'calc(100% - 2rem)'; 
 
blue.style.height = 'calc(100% -' + '2rem)';

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    padding: 1rem; 
 
    background-color: #f8f8f8; 
 
} 
 
div { 
 
    width: 5rem; 
 
    height: 5rem; 
 
} 
 
.red { 
 
    background-color: #e44; 
 
} 
 
.green { 
 
    background-color: #4d4; 
 
} 
 
.blue { 
 
    background-color: #0dd; 
 
}

<div class="red"></div> 
 
<div class="green"></div> 
 
<div class="blue"></div>

Answer 1

あなたの連結文字列にはスペースが不足しているので、-2remは負の値として解析されます。

blue.style.height = 'calc(100% - ' + '2rem)';