2015-11-09 31 views
13

タイトルに記載されているように、をスクロールバーなしでCSSで計算することは可能ですか?スクロールバーを使用せずにビューポート幅(vw)を計算することはできますか?

たとえば、私の画面の幅は1920pxです。 vw1920pxを返します。しかし、私の実際の身体の幅は1903pxのようなものです。

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

+1

ただし、スクロールバーはビューポートの幅に含まれていません! – Danield

+0

@Danield、通常はありません。それがそうであるとき、それは通常スクロールしていないときに消えるものであるので、質問は全く無意味です。 –

+0

@Danield申し訳ありませんが、私は最新の質問 –

答えて

0

the specsによれば、ビューポート相対長単位はスクロールバーを考慮に入れません(実際には存在しないと仮定します)。

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

+0

申し訳ありませんが、私は質問 –

+0

を更新しました。スペック別に 'vw'は、スクロールバーの存在を認識していません。だからあなたはそれらを考慮に入れることはできません。 –

+0

スペックによると、vwはスクロールバーの幅を取り去ります。オーバフローがautoの場合を除き、vwの値は "hidden"のように動作します。 ページがオーバーフローする必要がある場合は、「スクロール」に設定します。 overflow-x&overflow-yでは、表示するスクロールバーを選択します。 – Kulvar

0

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

あらかじめ設定された
width = $('body').innerWidth(); 

body { 
    margin:0; 
    } 
をあなたの問題は、私の知る限り、すべてのブラウザでのスクロールバーなしexaclyビューポートの幅を計算する良い方法はこれであるならば、言われています

25

これを行う1つの方法はcalcです。私の知る限り、100%はスクロールバーを含む幅です。あなたがそうならば:

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

あなたは100vwからスクロールバーの幅を引いた値を得ます。

あなたが例えば、ビューポートの50%(マイナスscollbar幅の50%)広場を望む場合は、同様の高さでこれを行うことができます

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

何らかの理由で、このタイプの質問に対する多くの回答にもかかわらず、私にとっては最もシームレスに働いたのはこの回答でした。それはとても完璧で速かったです。私は大規模な「つかまえ」を期待しています! – Daniel

+0

これは私にとって完璧に機能しました。ありがとう! – Husky

+4

これは驚くべきことですが、残念ながら、サイズ変更しようとしている要素が 'body'の直接の子であるか、' body'と同じ幅を持つ要素でなければ動作します(そうでなければ '100%'は間違った要素の幅を参照します) 。この場合、単純にパーセンテージを使用することができます。私が何かを見逃していない限り? – Nateowami

0

vwユニットはかかりません。 overflow-yautoに設定すると、overflow-yスクロールバーが考慮されます。

overflow-y: scroll;に変更し、vwユニットがスクロールバーのないビューポートになります。

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

関連する問題