web-dev-qa-db-ja.com

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

珍しい新しいCSSユニットについて学びました。 vhとvwは、それぞれビューポートの高さと幅の割合を測定します。

Stack Overflowのこの質問を見てみましたが、ユニットがさらに似ているように見えました。

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

答えは具体的に言う

vwとvhは、それぞれウィンドウの幅と高さの割合です。100vwは幅の100％、80vwは80％などです。

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

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

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

cssviewport-units
94
Richard Hamilton

100%は、あらゆる高さの100%にすることができます。たとえば、1000pxの高さの親divと100%の高さの子divがある場合、その子divは理論的にはビューポートの高さよりはるかに高いか、はるかに小さい可能性がありますビューポートの高さよりも、そのdivが100% heightに設定されている場合でも。

代わりにその子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>
131
Josh Beam

質問は非常に古く、@ 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>
14
IanC

@IanCの回答とコード例に感謝します。とても助かりました。明確化：「サイドバー」を書いたときに「スクロールバー」を意味していたと思います。

スクロールバーをカウントするビューポートユニットに関するいくつかの関連する議論を次に示します。

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

Firefoxは、「 Width：100％とwidth：100vw？の違い？ 」の@Nolonarのコメントにあるように、「Can I Use」を引用して、100vwからスクロールバーの幅を引きます。

使用できます 、おそらく仕様（？）と緊張しているため、Firefox以外のすべてのブラウザーは、現在「誤って」100vwを垂直スクロールバーを含むページ全体の幅と見なしています。

1
Slack Undertow

vw（view-width）およびvh（view-height）の単位は、ビューポートのサイズと関係があります。100vwまたはvhは、ビューポートの幅/高さの100％です。

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

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

1
user7135071

必ずしも発生していない違いがあります。 100vwにはscroolバーの幅が含まれますが、100％には含まれません。わずかな違いですが、設計を行う際に重要です。

0
an _user