1

サイズ変更可能な幅とスクロールを誘発する最大高さを持つ開いているダイアログウィンドウがあります。このダイアログの上部に div (または必要に応じて複数の要素) を配置して、スクロールしても div が表示されたままになるようにします。また、div の幅をダイアログの幅に合わせたいと思います。

そこで、いくつかの基本的な HTML マークアップから始めます。

<div id="dialog">
    <div id="dialogHeader"><div>
    <div id="dialogContents"></div>
</div>

この時点で、dialogHeader の幅は、ダイアログの幅に合わせて自動的にスケーリングされます。ただし、dialogContents を下にスクロールすると、dialogHeader がビューポートからスクロールアウトします。

dialogHeader を「position: fixed;」でマークすると、逆の問題が発生します。これで、ビューポートに残りますが、幅はコンテンツの幅に縮小されます。

dialogHeader の幅を 100% に設定すると、ダイアログのはるか外側に拡張されます。

これらの効果の両方を達成するためのトリックはありますか? または、jQuery を使用してダイアログの幅を監視し、dialogHeader の幅を自動的に調整する必要がありますか?

これは、位置が固定に設定されたダイアログの上部にある私の要素を示すスクリーンショットです。緑の背景が上部全体を覆っていないことに注意してください。ここに画像の説明を入力

4

1 に答える 1

1

ウィンドウ コンテンツをウィンドウ コンテナー内に個別かつ絶対的に配置しoverflow:auto、親をオーバーフロー/拡大する代わりにコンテンツを強制的にスクロールするために使用します。

トップフローター要素を親コンテキストに置くことができます。

Sample implementation on JSfiddle

出力ウィンドウのサイズを自由に変更して、サイズ変更方法をテストできることに注意してください。

于 2013-06-11T22:16:02.137 に答える