スクロールバーとjqueryの処理.width（）メソッド

Question

jQueryの.width()メソッドは、スクロールバーを考慮していないようです。私が問題になるのは、子供の幅を親の幅と同じにしたいからです。 #contentDivは私がサイズしたい要素であり、この例では

$('#contentDiv').width($('#containerDiv').width()) 

、と私はその親要素である#containerDivの幅を有するようにそれを設定したい：私は、次のようにjQueryを使用していました。私の問題は、私の実際のコードではthis fiddle.

に見られるように、これは、#contentDivの側面を遮断することで、私はすべてがスクロールのdivに収まる必要があり、私はjQueryを使ってサイズだいくつかの要素を、持っているので、ちょうど設定します#contentDiv〜100％のCSSはオプションではありません。 jQueryのdivのスクロールバーの幅を処理する最善の方法は何ですか？

Answer 1

このソリューションを中心に仕事をしながら私が見つけた最良の解決策はこれです：

http://chris-spittles.co.uk/?p=531

jQueryがすべて強力で、すべてのものが、時にはネイティブJSの小さなダッシュを使用すると、ピクセル完璧なページをレンダリングするために必要なすべてのです。このソリューションが役立つことを願っています！

Answer 2

更新日：jQueryの幅見つける方法の

なし、スクロールバーを占めていません。私の元の例では、.innerWidth(true) LOOKSを使用すると動作しますが、戻ってオブジェクトを返すだけで、widthが失敗し、内部コンテンツのサイズ自体が利用可能なスペースに収まるためです。しかし、スクロールバーを使ってdivの空き領域を計算する関数を書くことができます。このスクロールバーを使用して、必要に応じてコンテンツを配置することができます。

divをスクロールバーでdivに追加すると、利用可能な幅（すなわち、親の内幅から幅を差し引いたもの）が使用されるという事実を利用しました。スクロールバーの）。

関数は次のようになります。

function noScrollWidth(div){ 
    var measureDiv = $('<div id="measureDiv">'); 

    div.append(measureDiv); 

    var width = measureDiv.outerWidth(); 

    measureDiv.remove(); 

    return width 
}; 

私はその後、私のコンテンツのdivのサイズにこれを使用します。

$('#contentDiv').width(noScrollWidth($('#containerDiv'))); 

Working fiddle.

Answer 3

はこれを試してみてください：については

$('#contentDiv').width($('#containerDiv')[0].clientWidth) 

をモーそのソリューションに関する情報は、this StackOverflow answerを参照してください。

Answer 4

もう1つのアプローチは、両方の要素 'box-sizing property'を 'border-box'に設定して、contentDivの幅を100％に設定して、必要な方法で動作するかどうかを確認することです。

これで、古いブラウザのことを心配するプロジェクトが少なくなったため、「border-box」を使うと作業が楽になります。ただし、複数のプラットフォームで複数のブラウザをテストするようにしてください。なぜなら、すべて同じ方法でスクロールバーを処理するのかどうかわからないからです。