ウィンドウのサイズを変更するヘッダーとフッターの幅を変更する

Question

私は自分自身をコーナーにコーディングしているか、ここで明らかになっているものを監督しています。私はこのように設計された半流体CSSレイアウトを有する：

ヘッダ - 常に100％の幅を、X-繰り返し背景画像

容器含ま - 流体（1200pxに960ピクセル幅、中心を、両者を含有します列）

フッター - 常に100％の幅が、これは正常に動作し、ほぼすべての場合において、X-繰り返し背景画像

が含まれています。

要約すると、デザイン全体は任意の幅にスケーリングされますが、コンテンツ部分は最大で最大1200pxになります。ただし、これは写真サイトに関するものであるため、画像がコンテナの幅1200pxよりも広く、画像が切り取られることがあります。これは完全に問題ありません。私は完全な画像を表示したいです。しかし、ヘッダーとフッターを一番広い要素（この場合は画像）に拡大します。これは起こっていませんし、ウィンドウのサイズをイメージよりも小さくし、水平スクロールバーを使用して右にスクロールすると、特に問題になります。ヘッダーとフッターの両方に明確な隙間が残っていますが、少なくとも画像/コンテンツの幅。

単に幅を100％に設定するだけでは、コンテンツの幅ではなくビューポートに関するものでは不十分です。私は、ヘッダーとフッターに大きな値を指定してmin-widthを強制的に使用できますが、通常の解像度では水平スクロールバーが残ります。私はオーバーフローを使用してそのスクロールバーを非表示にすることができます：隠されたコンテンツのチョップとウィンドウが小さいときにスクロールバーを表示しません。

長いストーリーを短くするために、私はこのレイアウトはテーブルが機能するように動作することを望んでいると思います。ある列の内容がそのサイズよりも広い場合、他のすべての行が同じ幅にプッシュされます。最大の幅が合計幅を決定します。私はjavascriptのないソリューションを好むが、それは不可能であると思っているか、何か非常に明白なものを監督しているのだろうか？

Answer 1

100％幅は、要素の幅を要素の幅の100％に設定します。あなたの場合、これはウィンドウ自体（または本体要素）のようです。ヘッダーとフッターdiv（ここではdivを使用していると仮定しています）を画像に合わせるには、画像が入っているdivと同じdivに入れるか、画像divにdivを入れる必要がありますdivが正しい幅にスケーリングされていると仮定しています（イメージに合わせるようにスケーリングしていないと仮定してください）。

しかし、多くの場合、レイアウト用のテーブルを使用する方がはるかにクリーンで、cssハックに頼らずに探している水平方向のスケーリングのタイプを処理できます。

Answer 2

長い話を短くするために、私は私が欲しい どうなったと思う。このレイアウトはテーブルとして 作業が

表示うまくいくだろうということです。これらの要素の共通の容器にテーブル、およびディスプレイを：その子のテーブル行またはテーブルセル。これはIE6では機能しませんが、これをシミュレートするためにCSSのexpression（）ハックを使って巧妙なことを行うことができます。

ただし、最大幅を一切設定せず、ユーザーの希望のウィンドウサイズに合わせてデザインをよりよく流すことをお勧めします。