CSSユニット-vh / vwと％の違いは何ですか？

138

私は新しく、一般的でないCSSユニットについて学びました。vhそしてvw、それぞれのビューポートの高さと幅の比率を測定します。

私はスタックオーバーフローからこの質問を見ましたが、ユニットがさらに似ているように見えました。

vwおよびvhユニットの仕組み

答えは具体的に言う

vwとvhはそれぞれウィンドウの幅と高さのパーセンテージです。100vwは幅の100％、80vwは80％などです。

これ%は、より一般的なユニットとまったく同じように見えます。

開発者ツールで、値をvw / vhから％に、またはその逆に変更してみたところ、同じ結果が得られました。

2つの間に違いはありますか？そうでない場合、なぜこれらの新しいユニットが導入されたのCSS3ですか？

css viewport-units

— リチャードハミルトン
ソース

7

vw / vhが実行するのは、親への依存関係を削除し、ビューポートサイズに基づいたサイズ変更を可能にすることです。

— ステッカー2015年

2

読者の皆さん、IanCの回答で 1日を節約できるかもしれません。必ず確認してください。

— Skippy le Grand Gourou

167

100%ことができる100%ものの高さ。私は親がある場合たとえば、divだ1000px背の高い、と子供divにある100%高さを、その子はdiv理論的には、ビューポートの高さよりもはるかに小さいビューポート、またはの高さよりもはるかに背が高いかもしれないことがにもかかわらずdivに設定されています100%高さ。

代わりにその子をにdiv設定した100vh場合、ビューポートの高さだけで埋められ100%、必ずしも親ではありませんdiv。

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

スニペットを展開

— ジョシュビーム
ソース

ブートストラップの「行」内にネストされたサイドバーがあり、高さを100％に設定した後でも、ページサイズをフルサイズにすることができませんでした。私にとってうまくいったのは100vhでした

— raghav710

27

私は質問が非常に古く、@ Josh Beamが最大の違いに対処したことを知っていますが、さらに別の問題があります。

の<div>直接の子があり、<body>ビューポート全体を埋めたいので、を使用するとしますwidth: 100vw; height: 100vh;。width: 100%; height: 100vh;コンテンツを追加して垂直スクロールバーが表示されるまでは、すべて同じように機能します。以来vw、ビューポートの一環として、スクロールバーのアカウント、width: 100vw;よりわずかに大きくなりますwidth: 100%;ます。この小さな違いは、最終的に水平スクロールバー（ユーザーがその小さな幅を確認するために必要）を追加することになり、その結果、高さも両方の場合で少し異なります。

親要素のサイズがドキュメントのビューポートのサイズと同じであっても、どちらを使用するかを決定する際にはそれを考慮する必要があります。

例：

使用width:100vw;：

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

スニペットを展開

使用width:100%;：

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

スニペットを展開

— IanC
ソース

2

CSS body { overflow: hidden }により、スクロールバーが表示されなくなります。

— Dave F

2

回答とコード例、@ IanCをありがとう。それは私を大いに助けました。説明：「サイドバー」を書いたとき、「スクロールバー」を意味していたと思います。

以下は、スクロールバーをカウントするビューポートユニットに関するいくつかの関連するディスカッションです。

W3C仕様vw、vh、vmin、vmax単位（「ビューポートのパーセンテージの長さ」）は、「スクロールバーは存在しないと想定されている」と述べています。

どうやらFirefoxは、幅：100％と幅：100vwの違いの @Nolonarのコメントとして、100vwからスクロールバーの幅を差し引きます。「私は使用できます」を引用して観察します。

することができます私の使用は、おそらくスペック（？）と緊張して、Firefoxの以外のすべてのブラウザは、現在、「間違って」垂直スクロールバーを含めた幅ページ全体をする100vwを考えると言います。

— スラックアンダートウ
ソース

1

vw（ビューの幅）とvh（ビューの高さ）の単位は、ビューポートのサイズに関係します。100vwまたはvhは、ビューポートの幅/高さの100％です。

たとえば、ビューポートの幅が1600pxで、2vwと指定した場合、ビューポートの幅の2％、つまり32pxに相当します。

％単位は常に現在の要素の親要素の幅に基づいています

0

必ずしも上げられていない違いがあります。100vwにはスクロールバーの幅が含まれますが、100％には含まれません。それは小さな違いですが、デザインをするときに重要です。

1

IanCの答えはそうです。"vwはビューポートの一部としてスクロールバーを考慮しているため、幅：100vw;幅よりわずかに大きくなります：100％;."

— j08691