1

要素を親のオーバーフローに寄与させないようにする方法はありますか? はっきりさせて

以下の方法でページに適用される透かしのようなロゴがあります。メインコンテンツ(青破線)の一部外に配置することになっています

要素の背景を、ブラウザ ウィンドウのサイズが水平方向に変更されても維持されるような方法で設定するオプションを認識していないため<div>、背景としてロゴを使用position:absoluteし、必要なオフセットをメインに追加しました。コンテンツコンテナ。

以前は、ブラウザの幅が より広い限り、ページに水平スクロールバーが表示されませんでしたW1。現在、メイン コンテンツ ボックスの外側に追加の「透かし」要素が追加されているため、ブラウザがより狭い場合は常にスクロールバーが表示されます。W2

私が見逃している明らかなものはありますか?背景設定、または適切な余白の回避策/

モックアップ

アップデート:

問題を説明するために大まかなjsfiddleを追加しました

4

2 に答える 2

1

要素の幅は、パディングとマージンを含む実際の「幅」よりも大きいことに注意してください。div にパディングがある場合は、「幅」を同等の量だけ減らします。

それは理にかなっていますか?実際のcssとhtmlを投稿すると、より詳細な回答が得やすくなります

さらに、画像を実際のボディ要素の背景として割り当て、中央に設定することはできませんか?

コードをいじって、可能な解決策を考え出しました。

設定

body{overflow-x:hidden;}

それから加えて

@media all and (max-width: 400px)
{
 body{overflow-x:auto;   }
}

画面が 400px (div の幅) より小さくなるとすぐに、overflow:hidden がオーバーライドされ、スクロール バーが表示されます。

この時点で、透かしの幅を縮小することもできます。

于 2012-06-14T03:40:11.413 に答える
1

残念ながら、「透かし」の div をネストして配置したからといって、絶対にドキュメントの外に出ることはできません。ドキュメントの外に置くと、ページがスクロールします (ご覧のとおり)。

私が考える最初の解決策は、透かしを「コンテンツ」divの外に移動し、透かしをその親コン​​テナーに適用することです。「コンテンツ」divに相対的である必要があるため、それを行っていないと思いますが、試してみる必要があります。

また、スクロールするのは、ドキュメントがオーバーフローしたためです。お勧めはしませんが、簡単な修正方法は「overflow-x: hidden;」を使用することです。「コンテンツ」divの親コンテナ。

HTML の残りの部分を削除したため、解決策を提示するのが難しくなりました。また、構造が特定の方法で複雑な場合、一部の「修正」は適用できない場合があります。

于 2012-06-14T04:37:53.767 に答える