ビューポートより広いコンテンツを表示すると、ヘッダーやフッターが壊れないようにするにはどうすればよいですか？

Question

自分自身をCSSコーナーにコーディングしました。このページを見て：

http://staging.jungledragon.com/image/1082/sizes/large

は、このページを開いて、水平スクロールバーが表示されるように、ブラウザウィンドウの幅は、コンテンツの総幅よりも小さくなっていることを確認してください。右にスクロールすると、ヘッダーとフッターの両方が壊れていることがわかります。その理由は、ヘッダーとフッターが100％に設定されているためです。 100％はブラウザウィンドウ自体ではなく、ビューポートの幅を意味します。ソリューションのための私の検索で

、この1つは多くのことをポップアップ表示：私は私のフッターとヘッダーがする必要がどのように広い事前に知っていないので、

http://www.springload.co.nz/love-the-web/backgrounds-disappear-on-horizontal-scroll/

これは私のためのソリューションではありません。また、スクロールバーが必要ない場合でもスクロールバーを常にトリガーするので、幅の値を非常に高い値に設定することはできません。

実際のブラウザウィンドウのサイズに合わせてヘッダーとフッターを拡張できますが、スクロールバーの動作は適切なままです。まったく可能ですか？

Answer 1

これは決定的な解決策ではないことをお詫びしますが、すてきなCSSデバッガを使ってページを見ると、htmlとbodyの幅がオーバーフローした画像に対応するように伸びないことがわかります。

これは、ヘッダーとフッターが伸びない理由です。 width：100％は「ビューポートの幅」を意味するものではなく、「包含ブロックの幅」を意味します。

収容ブロックは本体です。そして体は伸びていません。それは画像の幅にかかわらず一定のままです。したがって、#wrappertopらの幅は水平スクロールビューポートの100％ではありません。それは体の100％です。

ビューポートが水平方向にスクロールして、ヘッダーとフッターが伸びていて、本当に死んでいる場合は、最初にbodyブロック（またはHTML）にCSSを適用しようとします。 ）あなたがそれらを伸ばしさせることができるかどうか見るために。それで、あなたのヘッダーとフッターはおそらくもなります。

イメージをセンタリングするか最大幅にすることは、2つの良い解決策です。しかし、それがあなたが望むものでない場合は、それがあなたの特権です。 :-)

もし私がチャンスを得るなら、私は少し実験することができます。しかし、それは昼食です。それは、しかし、見て開始する場所です。

Answer 2

ヘッダーとフッターの最小幅を中央列の幅（#colful）に設定するか、画像が含まれるページの最大幅に設定できます。 OK用事、あなたはすでにやった...

width: 900px; 
margin: auto 0; 

：

min-width: 123px; 

は、そして、あなたはこのような何かを代わりに左マージンを行うのでは、あまりにも中央の列を中央にする必要があります。その列の中にイメージを入れる必要があります。手動でイメージのサイズを変更することも、 "overflow：none;"のようなオーバーフロープロパティを行うこともできます。