web-dev-qa-db-ja.com

CSS `height：calc（100vh）;`対 `height：100vh;`

私は前の開発者が使用したプロジェクトに取り組んでいます：

.main-sidebar {
    height: calc(100vh);
}

私はもう彼/彼女に連絡する方法がありません、そして私は2つの方法の違い（もしあれば）が何であるかを理解したいと思います。

（これはこの質問をするのに適切な場所ですか？）

htmlcssuser-interfacecross-browser
3
Adriano

式calc(100vh)が計算されるたびに、常に100vhになるため、違いはありません。

1
jameslittle230

[〜＃〜] vh [〜＃〜]
_height: 100vh;_は、この要素の高さがビューポートの高さの100％に等しいことを意味します。

例：_height: 50vh;_
画面の高さが1000pxの場合、要素の高さは500px（1000pxの50％）になります。

[〜＃〜]計算[〜＃〜]
height: calc(100% - 100px);は、要素の値を使用して要素のサイズを計算します。

例：
height: calc(100% - 100px);画面の高さが1000pxの場合、要素の高さは900px（1000pxの100％から100pxを引いたもの）になります。

*以前の開発者が値を計算したくない場合は、calc()を使用する必要はなかったと思います。

5
Anukul Limpanasil

Calc（）CSS関数を使用すると、CSSプロパティ値を指定するときに計算を実行できます

あなたはこれを参照したいかもしれません https://www.w3schools.com/cssref/tryit.asp?filename=trycss_func_calc

（以前の開発者がこれを使用した理由は、彼が慣習的にどこでもそれを使用していて、後で計算を追加する方が簡単だと思われるためです）

3
Joyy

基本的にcalc（）関数では、加算（+）、減算（-）、乗算（*）、および除算（/）を含む数式をコンポーネント値として使用できます。

これであなたの場合、どちらも計算を使用していないのと同じです。したがって、高さを使用できます：100vh

2
DPS

一般的な使用例は、最初にヘッダーまたはその他の要素を差し引いた場合です。 calc（100vh-80px）。

1
Dragomir Dan