スクロールバーなしでビューポート幅（vw）を計算することは可能ですか？

88

タイトルで述べたように、vwcssだけでスクロールバーなしで計算することは可能ですか？

たとえば、私の画面の幅は1920px。です。vw戻ります1920px、素晴らしい。しかし、私の実際の体幅はのようなものにすぎません1903px。

1903pxcssのみで値を取得する方法はありますか（の直接の子だけでなくbody）、またはこれにはJavaScriptが絶対に必要ですか？

css viewport-units

— マルテンザンダー
ソース

2

しかし...スクロールバーはビューポートの幅に含まれていません！？

— ダニエルド2015年

@Danield申し訳ありませんが、myquestionを更新しました

— Marten Zander

そこに置いた人工スクロールバーについて話している場合は、次のようなものを探している可能性があります。width: calc(100vw - scrollbarWidth)ここで、「scrollbarWidth」は15pxのような固定値です

— Danield

@Danield実際には、すべてのネイティブブラウザスクローラーの幅が可変であるクロスブラウザ修正が必要です

— Marten Zander

2

私は現在、Chrome v64でブートストラップ4を使用しているページで作業しています。％は内側の幅（スクロールバーを含まない）、vwは外側の幅（スクロールバーを含む幅）です。したがって、vwは使用できず、OPと同様に使用しません。なぜそれが起こっているのか理解できません。

— Eric_B 2018年

116

これを行う1つの方法は、calcを使用することです。私の知る限り、100％はスクロールバーを含む幅です。だからあなたがそうするなら：

body {
  width: calc(100vw - (100vw - 100%));
}

100vwからスクロールバーの幅を引いたものが得られます。

たとえば、ビューポートの50％（スコルバー幅の50％を引いたもの）の正方形が必要な場合は、高さでもこれを行うことができます。

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}

— マティアス・オットソン
ソース

42

これは驚くべきことですが、残念ながら、サイズ設定している要素がの直接の子でbodyあるか、と同じ幅の要素である場合にのみ機能しますbody（そうでない場合100%は、間違った要素の幅を参照します）。その場合、単にパーセンテージを使用できます。私が何かを逃していない限り？

— nateowami 2017年

7

スクロールバーの100vwアカウンティングが実際に問題になる場合、つまり、固定幅のコンテナーに100vwブロックを配置する必要がある場合は問題ありません。

— 確か

56

数学：100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% 何かが恋しいですか？

— カミルKiełczewski

4

残念ながら、100％が利用できないため、これは絶対位置の要素では機能しません:(

— Hrvoje Golcic 2018

4

@TKoL彼の解決策が実際に問題を解決するすべての場合において、width：50％も同様に機能します。KamilKiełczewskiは正しいです、この解決策は役に立たないです。

— エリエゼルベルリン

17

これを行うには、ドキュメントが読み込まれたら、JavaScriptの行を追加してCSS変数を定義します。

document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");

次に、CSSvar(--scrollbar-width)で、さまざまな幅のスクロールバーの有無にかかわらず、さまざまなブラウザに必要な調整を行うために使用できます。必要な場合は交換し、水平スクロールバーのために類似した何かを行うことができますinnerWidthとinnerHeightしてclientWidthとclientHeight。

— user11990065
ソース

私にとって、これが返すサイズは必要な2倍の大きさです。ヒントはありますか？...私に16pxを与えるが、8pxは十分だろう

— ファビアンBeyerlein

9

仕様によると、ビューポートの相対的な長さの単位はスクロールバーを考慮していません（実際、スクロールバーは存在しないと想定しています）。

したがって、意図した動作が何であれ、これらのユニットを使用するときにスクロールバーを考慮に入れることはできません。

— マダラの幽霊
ソース

繰り返しますがvw、仕様によれば、スクロールバーの存在を認識していません。したがって、それらを考慮に入れることはできません。

— マダラの幽霊

1

仕様によると、オーバーフローが自動である場合を除いて、vwはスクロールバーの幅を取り去り、vw値の「非表示」のように機能します。したがって、ページがオーバーフローする必要がある場合は、「スクロール」に設定してください。オーバーフローxとオーバーフローyを使用して、表示するスクロールバーを選択します。

— Kulvar 2017

1

@Kulvarはクロームで試してみましたが、ボディをoverflow-y: scrollvsに設定しても、overflow-y: autovwユニットの計算値は変わらないようです。具体的には、サイトで3.82vwに設定したものがあり、コンピューターの幅は1920pxです。オーバーフロー自動で、3.82vw = 73.344px、次にオーバーフロースクロールを試してみました。これも73.344pxを出力しますが、正しければ実際には72.6946pxを出力するはずです

— TKoL 2018

あなたの場合は100vwあるのであれば100％が可能な場合は、100％に変更し、考慮にスクロールバーを取る

— ハイロ

3

Webkitブラウザーはスクロールバーを除外し、その他のブラウザーは返された幅にスクロールバーを含めます。もちろん、これは問題につながる可能性があります。たとえば、高さを動的に追加するajaxを使用して動的にコンテンツを生成した場合、ページの視覚化中にSafariがレイアウトから別のレイアウトに切り替わる可能性があります...わかりました、それは頻繁には発生しませんが、に注意してください。モバイルでは、問題が少なく、スクロールバーの原因は通常表示されません。

そうは言っても、問題がすべてのブラウザでスクロールバーなしでビューポートの幅を正確に計算することである場合、私が知る限り、良い方法は次のとおりです。

width = $('body').innerWidth();

以前に設定したこと：

body {
    margin:0;
}

— ホールデン
ソース

2

に設定されている場合vw、ユニットはoverflow-yスクロールバーを考慮しません。overflow-yauto

に変更するoverflow-y: scroll;と、vw単位はスクロールバー付きのビューポートになります。次に、calc（）を使用して、vw値からスクロールバーのサイズを減算できます。スクロールバーの幅を定義することもできるので、ブラウザに依存しません。

考慮すべき唯一の欠点。コンテンツが画面に収まる場合は、とにかくスクロールバーが表示されます。考えられる解決策は、javascriptでからに変更するautoことscrollです。

— イラリオ・エングラー
ソース

1

どういう意味overflow-xですか？

— エリランマルカ

2

本当じゃない。VWユニットは、とスクロールバーが含まれてoverflow-y: scroll;

— NoSkill

0

コードを「calc」で混乱させることなく機能することがわかった唯一の方法は、コンテナ要素のサイズを100vwにすることです。オーバーフローのコンテナの周りにラッパーを追加します-x; これにより、スクロールバーがコンテンツの上にあるかのように、コンテナが全角になります。

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	html{ overflow-y: scroll; }
	html, body{ padding:0; margin: 0;}
	#wrapper{ overflow-x: hidden; }
	.row{ width: 100vw; }
	.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
	.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
	.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
	</style>
</head>
<body>

<div id="wrapper">
<div class="row">
	<div class="row-left"></div>
	<div class="row-right"></div>
</div>
</div>


</body>
</html>

スニペットを展開

— SequenceDigitale.com
ソース

0

ケースがスライダーに似ている場合：多くの回答に投稿されているように、幅100％はスクロールバーを考慮しませんが、100vwは考慮します。ウィンドウの幅を取る必要があり、すでにウィンドウ幅が100％のコンテナ内にネストされている（または自然なブロック幅がそのような）要素が多数ある場合は、次を使用できます。

コンテナのフレックスを表示
フレックス：0 0子要素の場合は100％

— ファクンドビデラペーニャ
ソース

0

100vw =スクロールバーのある画面の幅100％=スクロールバーのない画面の幅

画面幅を測定するときは、常にcalc（100％-50px）を使用することをお勧めします。スクロールバーが直接表示されるWindowsブラウザーでも、macOSブラウザーと比較すると画面幅の戻り方が異なります。

— Vidit Anjaria
ソース

-3

最も簡単な方法は、htmlとbodyを100vwに設定することです。

html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }

唯一の問題は右です-スクロールバーが表示されている場合、ほとんどが少しカットされます。

— ゴナビス
ソース

-3

私の場合、div 100wh-230pxを設定する必要があり、その余分なスクロール幅で同じ問題に直面していました：

width: calc(100vw - (100vw - 100%) - 230px);

— Omar Errabaany
ソース

-4

これは私の解決策ではありませんが、全角ではなく相対要素で絶対値を使用してドロップダウン全角メニューを作成するのに役立ちます。

：rootのcss varでスクロールして、それを使用する必要があります。

:root{
 --scrollbar-width: calc(100vw - 100%);
}


div { margin-right: var(--scrollbar-width); }

https://codepen.io/superkoders/pen/NwWyee

— デニス・サヴェンコ
ソース

2

これは、divがルートにあるためにのみ機能します。divがルートにない場合、それは壊れます。これは、calcが定義されている場所ではなく、参照されているセレクターに関連して、calcが参照されたときに解決されるためです。codepen.io/Pedr/pen/YorLPM

— 気を散らさない