135

vwタイトルにもありますが、cssのみでスクロールバー無しで計算することは可能でしょうか？

たとえば、私の画面の幅は1920px. vw返品1920px、素晴らしい。しかし、私の実際の身幅は1903px.

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

4

14 に答える 14

158

これを行う 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))
}
于 2016-01-19T19:02:40.990 に答える
34

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

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

次に、CSS を使用var(--scrollbar-width)して、さまざまな幅のスクロールバーの有無にかかわらず、さまざまなブラウザーに必要な調整を行うことができます。必要に応じて、水平スクロールバーに対して同様のことを行うことinnerWidthがinnerHeightできclientWidthますclientHeight。

于 2019-09-01T19:08:23.000 に答える
10

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

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

于 2015-11-09T10:06:23.097 に答える
5

コピー＆ペーストソリューション

css 変数--scrollbar-widthを設定し、サイズ変更時に更新し続けるというuser11990065 の回答に基づく簡単なドロップイン ソリューションを次に示します。また、DOMContentLoaded および load イベントで計算されるため、最初のレンダリング フェーズでのサイズ変更について心配する必要はありません。

バニラJSであるため、コピーしてコードに貼り付けることができます（または「script」タグでラップして、HTMLコードに直接貼り付けます：

function _calculateScrollbarWidth() {
  document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
}
// recalculate on resize
window.addEventListener('resize', _calculateScrollbarWidth, false);
// recalculate on dom load
document.addEventListener('DOMContentLoaded', _calculateScrollbarWidth, false); 
// recalculate on load (assets loaded as well)
window.addEventListener('load', _calculateScrollbarWidth);

スクロールバーを表示/非表示にする動的な高さの変更がページにある場合は、ドキュメントの高さの変更の検出を調べて、高さの変更でも再計算をトリガーできるようにすることをお勧めします。

値は JS で計算され、固定値に設定されるため、次のように CSS の計算操作で使用できます。

.full-width {
  width: calc(100vw - var(--scrollbar-width));
}

これにより、正確に利用可能な幅が.full-widthになります。

于 2021-03-20T20:36:20.963 に答える
3

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

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

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

以前に設定した：

body {
    margin:0;
}
于 2015-11-09T11:28:14.223 に答える
0

100vw = スクロールバーを含む画面の幅 100% = スクロールバーを含まない画面の幅

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

于 2020-12-09T15:00:31.540 に答える
-1

コードを「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>

于 2019-03-21T15:30:05.167 に答える