Webkitブラウザでそれぞれyスクロールバーの幅とxスクロールバーの高さをボディ幅と高さから差し引く

Question

私のウェブページは、幅が900pxのヘッダー、コンテンツ、フッターdivを中心としています。

（私がヘッダー、コンテンツ、フッターについて提供できる他の関連情報は、ヘッダーが固定された位置付けであり、コンテンツが相対的に配置され、フッターが絶対的に配置されているということだけです。ソリューションに関連するだろう）私は、次のCSSメディアクエリを使用しています

：。

/* If screen width is less than or equal to 900px (e.g.: tablet, mobile) ... */ 
@media only screen and (max-width: 900px) { 
    /* Scale header, content and footer width */ 
    #header, #content, #footer { width: 100%; } 
} 

がページ幅がデフォルトの幅よりも小さくなったときにページでこれらのdivを縮小開始します。私はスケールをすべてのブラウザでシームレスにしたいと思っていますが、Webkitブラウザはページ幅のyとxスクロールバーの幅を計算するため、問題が発生します。これにより、スクロールバーは特定の幅でdivをカバーし、スケールが遅くなるようにします。

JQueryソリューションでは、Webkitブラウザの幅と高さにスクロールバーを含める方法を説明するために、WebkitブラウザでそれぞれCSSの幅と高さからyスクロールバーの幅とxスクロールバーの高さを計算して減算したいと考えています表示領域に合わせてページの本文を再スケーリングするためのCSSメディアクエリは、すべてのブラウザで同じように機能します。

私は、スクロールバーを常に表示させるなど、Webkitブラウザで常に同じように機能するような代替ソリューションには興味がありません。

Answer 1

JavaScriptを使用すると、HTML本体が水平方向と垂直方向の両方のウィンドウよりも大きいかどうかを検出できます。ウィンドウを超えると、スクロールバーが表示されます。あなたはこれに対応するために体に詰め物を追加することができます。

スクロールバーの幅は約15ピクセルだと思いますが、それは簡単に見つけることができます。

// Check if body height is higher than window height :) 
if ($("body").height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($("body").width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
} 

上記のコードを使用して両方の値を検出できます。これらをウィンドウのサイズ変更のリスナーに配置すると、必要に応じてすべてのパラメータが再評価されます。

UPDATE：

$(window).resize(function(){ 
    // Check if body height is higher than window height :) 
    if ($("body").height() > $(window).height()) { 
     $('body').css('padding-bottom', '15px'); 
    } else { 
     $('body').css('padding-bottom', '0'); 
    } 

    // Check if body width is higher than window width :) 
    if ($("body").width() > $(window).width()) { 
     $('body').css('padding-right', '15px'); 
    } else { 
     $('body').css('padding-right', '0'); 
    } 
} 

・ホープ、このことができます:) EXTRA

を：

スクロールバーの寸法は、ブラウザごとに異なっている場合、あなたは、単にブラウザ適切な寸法でCSSクラスを作ることができます

$('body').addClass('<CLASSNAME>'); 

および

$('body').removeClass('<CLASSNAME>'); 

ボディのパディングを設定したり解除したりする代わりに、