問題タブ [css-position]

私はこのウェブページをコーディングしています。http://www.nomizine.com/misc/tbs/default.html

IE7を除いてどこでもうまくレンダリングされます。ブラウザウィンドウのサイズを変更すると、上部のナビゲーション、左側のコンパス、右側のサブスクライブブロックが消えます。

それを修正する方法はありますか？ところで、私はすでにzoom：1、clear：bothなどのHasLayoutのトリックを試しましたが、何も機能していないようです。

jQuery ダイアログをブラウザーの右端から x ピクセル離して配置したいと考えています。これはとにかく可能ですか？

http://jqueryui.com/demos/dialog/

position オプションにはそのような設定はないようですが、他に方法はありますか?

次のコードがあります。

必要な display: inline-block プロパティを削除しない限り、2 番目の div は 32 x の位置に配置されません。これを回避する方法はありますか？

編集: display: inline-block を削除するとうまくいくようですが、スクロールバーが水平に表示されます (div が見えないスペースを取るため)。

bodydivが特定の幅に設定されている基本的なレイアウトがあります。余白は左右に自動に設定されています。その結果、divが中央に配置されます。

さて、このdiv内のすべてのサブ要素を配置する場合、絶対配置または固定座標を使用するのが最善ですか？これらのサブ要素は、基本的にテキストの列、いくつかの画像、およびいくつかの見出しです。それらすべてを左にフロートさせると、それらが互いにスタックすることがわかりました。これは基本的に私が欲しいものです。しかし、座標を指定する方が良いでしょうか？私はあなたが見るIEで小さな一般的なマージンのバグに遭遇しました。そして、私は絶対的なポジショニングがそれを修正することを知っています。しかし、それは汚い修正でしょうか？

つまり、レイアウト自体はある意味で流動的です。ただし、bodydivには幅があります。したがって、サブ要素は解像度に関係なく移動しません。

次のコードがあります。

div1 は div2 をカバーします。onmouseoverdiv2で処理する必要があります。div1 がイベントを処理し、それを body に延期すると仮定しますonmouseover(body は親要素であるため)。div1 を div2 の「子」に変更できません。何か案は？

編集: div1 は半透明で、常に表示する必要があり、div2 は色で塗りつぶされます (透明ではありません)。div1 が半透明であるため、div2 も常に表示されます。div2 内に div1 を含めることはできません。

固定の高さの div にも含まれている場合、スクロール バーの下部が表示されたまま 100% の高さまで div を拡張しようとしています。誰かが私を助けてくれませんか:)

以下のレイアウトを使用すると、.div2 の下部にある垂直スクロール バーが視点の高さから外れます。これは、.div1 の高さが 200px であり、div1 が高さ 100% + 200px になるためだと推測しています。

.div1 を固定の高さにし、.div2 を拡張して残りのウィンドウの高さを埋め、その高さに達するとオーバーフローする方法はありますか。

ここにCSSがあります

そして、これがHTMLです。

とても有難い。ありがとう

私は3つのレベルを持っていますdiv：

• （下の緑色）div 。のあるトップレベルoverflow: hidden。これは、ボックスのサイズを超えた場合に、そのボックス内の一部のコンテンツ（ここには表示されていません）をトリミングするためです。
• （下の赤で）この中に、私は持っdivていposition: relativeます。これの唯一の用途は、次のレベルです。
• （下の青色）最後divに、フローを削除しますposition: absoluteが、（ページではなく）赤を基準にして配置divします。

青いボックスをフローから取り出して、緑のボックスを超えて拡張したいのですが、次のように赤いボックスに対して相対的に配置します。

ただし、以下のコードを使用すると、次のようになります。

そしてposition: relative、赤いボックスのを削除すると、青いボックスは緑のボックスから出ることができますが、赤いボックスに対してもう配置されていません。

次の方法はありますか？

• overflow: hidden緑色のボックスを維持します。
• 青いボックスは緑のボックスを超えて拡張され、赤いボックスに対して相対的に配置されていますか？

完全なソース：

次のようなレイアウトを作成しようとしています (想像力を働かせる必要があります)。

A はテキスト、B は左端を均等に並べたいテキストです。

さらに複雑なことに、B はデフォルトで非表示になっているため、ページ フローを設定する際に考慮する必要はありません。代わりに、A が表示される場所の上にマウスオーバーしたときに表示する必要があります。したがって：

A1 をマウスオーバーすると、次のようになります。

各 AB 行は、固定幅の div に含まれています。Aのサイズは事前にわからないので、Bはdivに残っているスペースを単純に取りたいと思います。

Firefox では、B に絶対的な位置を持たせただけで、すべてが素晴らしく、期待どおりに動作しました。

ただし、IE8 では、B は固定幅の div に等しい幅をとっているため、B は既に A の幅だけオフセットされているため、オーバーフロー テキストで div がオーバーランします。div をオーバーフローに設定できます。 :hidden ですが、これは単純にテキストを切り刻みます。B に width:auto を設定しても、何も行われないようです。

それとも、最新のすべてのブラウザーで機能するアプローチがありますか?

ヘッダー、メインボディ、フッターがあります。ヘッダーとメインボディは適切にスタイルされています。フッターの場合、本体の後ろに表示したいので、次を使用しました：

これで目的の結果が得られますが、下部に 60px の余分なスペースができます。

この余分なスペースをクリアするにはどうすればよいですか?

メインのdivの幅の外側に絶対に配置されたいくつかのデザイン要素で、中央のdivを「隣接」しようとしています。右側の要素が原因でスクロール バーが表示されますが、左側の要素では表示されません (IE6/7/8、Chrome、Firefox)。その水平スクロールバーを取り除くにはどうすればよいですか?