web-dev-qa-db-ja.com

vwにビューポートの一部としてスクロールバーが含まれているのはなぜですか？

幅と高さが等しいボックスがたくさんあるWebサイトを構築しようとしています。たとえば、同じサイズのボックスが2つ並んだページがあります。

簡単な解決策は、幅と高さを50vwに設定することでした。これは、スクロールバーが表示されるまでうまく機能します。私は何時間もグーグル検索していて、なぜvwとvhがビューポートの一部としてスクロールバーを含めるのか理解できません。

これが私の問題のサンプルです

[〜＃〜] html [〜＃〜]

<div class="container">
    <div class="box red"></div>
    <div class="box green"></div>
</div>
<div class="lotta-content"></div>

[〜＃〜] css [〜＃〜]

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
}

.box {
    float: left;
    width: 50vw;
    height: 50vw;
}

.red {
    background-color: red;
}

.green {
    background-color: green;   
}

.lotta-content {
    height: 10000px;   
}

不要な水平スクロールバーに注意してください

https://jsfiddle.net/3z887swo/

考えられる解決策の1つは、幅にはパーセンテージを使用し、高さにはvwを使用することですが、これは完璧なボックスにはなりません。これがサンプルです

https://jsfiddle.net/3z887swo/1/

ビューポートの一部としてvw/vhにスクロールバーが含まれている理由を誰かが知っていますか？また、誰かが私のソリューションよりも優れた解決策を持っている場合、私はそれを聞きたいです。純粋なCSSソリューションを探しています。私はむしろJavaScriptを持っていません。

htmlcssscrollbarviewport
17
Kevin

ビューポートユニットが対応していないと便利です。 含む スクロールバーを引き起こしますが、結局のところそれは表示サイズ（画面）です。疑似要素でこの解決策を見てください：

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

あなたの例でも正方形になります：

https://jsfiddle.net/3z887swo/4/

.box {
    float: left;
    width: 50%;
}

.box::before {
    content: "";
    display: block;
    padding-top: 100%;
}

編集-なぜこれが機能するのか（元の要素の幅に対応する垂直パディング）疑問に思っている場合...それは基本的に仕様でどのように定義されているかです：

パーセンテージは、「padding-top」と「padding-bottom」の場合でも、生成されたボックスの包含ブロックの幅を基準に計算されます。

http://www.w3.org/TR/CSS2/box.html#padding-properties

私自身の答えに出会った後、それはいくつかの改良が必要だと思います。セマンティックのあいまいさが、「include」という単語を先頭にある「cause」に置き換えた理由です。 vwユニットではビューポートのサイズのみが考慮されるため、スクロールバーを含めたりしたりしないおよび原因となるオーバーフローし、スクロールバーの幅が100vwに追加されると、反対方向にスクロールします（ビューポートとスクロールバーの幅に必要な合計スペースが画面を超えて作成されます）。

ここでの質問と同様に、vwユニットを処理する最善の方法は、デスクトップブラウザー（オーバーレイスクロールバーがない）との互換性が低いため、できる限り回避することです。

CSS変数が含まれているアイデアを編集しましたが、期待されていたようです。

9
Shikkediel

私には別の答えがあり、私の欲求不満を共有する必要性を感じています

標準メーカーは愚かであるため

（通常、委員会は常に））

簡単な回避策の1つは、スクロールバーを常に周りに置いて対処することです。

html,body {margin:0;padding:0}
html{overflow-y:scroll}

（使用する overflow-x（vhを使用するレイアウトの場合）

私は彼らが本当のことを真剣に考えていると思います犬をねじ込んだ。

27
ZJR
html { overflow-x: hidden; }

うまくいくようです

0
Yleaxeman