9

#Wrapperだから、固定幅のDIVがあります。その DIV 内に、#Panel幅が固定された別の DIV があります。

<div id="Wrapper">
    <p>...</p>
    <div id="Panel">Panel</div>
    <p>...</p>
</div>

Panel の幅が Wrapper の幅よりも大きい場合があります。そのような場合、Panel を完全にラップするように、JavaScript を介して Wrapper を広げたいと思います。

ライブデモ: http://jsfiddle.net/H6rML/

.scrollWidthPanel の幅を決定するために Wrapper で使用するつもりでした。ただし、問題は、Wrapper に水平パディングがあり、.scrollWidth何らかの理由でラッパーの左パディングしか含まれていないことです。そう：

Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width

したがって、与えられた：

#Wrapper {
    width: 200px;
    padding: 10px;        
}

#Panel {
    width: 300px;
}

Wrapper.scrollWidthを返しますが310px、これはあまり役に立ちません。パディングが含まれておらず、パネルの幅のみが返された場合.scrollWidthは、それで作業できます (パディングをその値に手動で追加します)。両方のパディングが含まれていれば、それも使用できます。しかし、なぜ左のパディングだけが含まれているのでしょうか? (ちなみに、この動作はクロスブラウザーのようです。)

いくつかの追加メモ:

  1. Wrapper で幅を直接設定することはできません。実際のコードでは、Wrapper の数レベル上にある祖先要素に幅を設定し、カスタム API を使用して幅を設定しています。320pxこれが、完全な値を取得する必要がある理由です。

  2. Wrapper の内容に依存しない解決策を希望します。私のデモでは Panel ですが、他のシナリオでは、オーバーフローする別の要素や複数の要素が存在する可能性があります。それが私が.scrollWidthWrapperを使った理由です。

320px値に適切なパディングを手動で追加せずに値を取得する方法はあり.scrollWidthますか?

ところで、標準によれば、適切なパディングを含める必要があります。

scrollWidth 属性は、次の手順を実行した結果を返す必要があります。

  1. 要素に CSS レイアウト ボックスが関連付けられていない場合は、0 を返し、これらの手順を終了します。

  2. 要素がルート要素で、ドキュメントが互換モードでない場合は、max(ドキュメント コンテンツの幅、innerWidth の値) を返します。

  3. 要素が HTML body 要素であり、Document が quirks モードの場合は、max(ドキュメント コンテンツの幅、innerWidth の値) を返します。

  4. 'padding-left' プロパティの計算値、'padding-right' の計算値、および要素のコンテンツ幅を返します。

ソース: http://www.w3.org/TR/cssom-view/

ブラウザがそれに応じて動作しないのはなぜですか?

私の投稿をさらに明確にするために、2 つの主な質問をまとめてみましょう。

(1) 標準で値に適切なパディングを含める必要があると規定されている.scrollWidth場合、ブラウザがそれに応じて動作しないのはなぜですか?

320px(2)正しいパディングを手動で追加しなくても、正しい値(私の場合)を取得することは可能ですか?

この質問は別のスレッドで回答されています

この質問に対する答えはここにあります:子要素が水平方向にオーバーフローする場合、親の右側のパディングが無視されるのはなぜですか?

</p>

4

4 に答える 4

1

正しく理解できているかどうかわかりませんが、私が読んだことから、#Panel に基づいて #Wrapper の幅を変更したいと考えています。その場合は、次のことを試してみてください。

#Wrapper {
    display: inline-block;
    make sure to remove width from #Wrapper
}
于 2012-11-05T13:57:14.010 に答える
0

jQuery を使用してこれを行うことができます。

$(function() {
    $("#Wrapper").width($("#Panel").outerWidth());
});

#Panelこれには、 のパディング、マージンなどが考慮されます。

于 2012-04-06T16:35:42.567 に答える
0

これを試して：

#Wrapper {
    min-width: 200px;
    padding: 10px;
    float: left; 
}

またはjQueryを使用する

$(document).ready(function() {
    var width = jQuery("#Panel").width();
    $("#Wrapper").width(width);
});
于 2012-04-06T15:09:56.217 に答える