CSSテクニックコミュのブラウザを狭めると背景が縮んでしまう

初めまして。
行き詰ってしまいましたので、質問させてください。

http://www.aichi-town.net/atn/css-jikken/01.html

にあるようなレイアウトのサイトを作成しています。

#headerと#footerの横幅は指定無しでブラウザに合わせて可変、
真ん中の#contentsのみ800px固定のデザインになっています。

ブラウザ幅を800pxより狭めた状態で、横スクロールバーを動かすと、
#headerと#footerの幅がブラウザを狭めた時の横幅に縮んでしまっています。
またブラウザを800以上に拡げれば通常の表示に戻るのですが…。
これは、バグなのでしょうか？それとも仕様なのでしょうか？
IEに限らずFirefoxなどでも起こっています。

#headerと#footerはどうしても横幅固定ではなく、画面いっぱいの表示に
しなくてはならないので、この不思議な現象に頭を悩ませております。
解決策をご存知の方いらっしゃいましたら、ご助言いただけますと幸いです。

コメント(17)

最初
全て
最新の40件

[1] mixiユーザー 01月05日 21:16

単純に#headerと#footerのwidthを100％にするんじゃダメでしょうか。

[6] mixiユーザー 01月06日 02:46

以前同じような状況で、しゃむむfeat.るるさんの

＞直下の要素（h1など）に
＞ width:800px;

の応用で対処したんですが、どうやってもマックＩＥでダメだった記憶。
その時はマックＩＥのみ、ヘッダーフッターも可変なし（この場合800px固定）で逃げましたが、何か対応策あるなら知りたいです。
また、中の要素の幅を固定したくない場合はどうなるんでしょうね。

便乗質問スンマセン。

[7] mixiユーザー 01月06日 03:17

min-width 使うのが一番いいと思います。現状のIEがサポートしてないので、Javascriptを使ったり( http://www.doxdesk.com/software/js/minmax.html )、ネガティブマージンを利用して擬似的に min-width を指定する方法(検索すると出てくると思います)をとったりしてみてはいかがでしょう？

[8] mixiユーザー 01月06日 10:34

レスありがとうございます

＞ginnezさん
すみません、これはすでに試したのですがダメでした。。

＞しゃむむfeat.るるさん
直下の要素に幅指定はこれもすでに試したのですが、
winIEのみ表示が直るみたいです。FirefoxやマックのIEでは
ダメでした。

min-widthというのは初耳です。サポート状況がアレっぽいので
使えるかどうか分かりませんが調べてみたいと思います。

＞K@喫茶ふはつさん
すみません、Firefoxでの表示は直りませんでした。おそらくマックのほうもダメだと思います。

＞おかずさん
マックのIEはwinIE寄りの挙動をしたり時にFirefoxと同じだったりで
もうワケがわかりません。
マックへの対処は私も今回初めてやらなくてはならなくなったので、相当困ってます。

＞Winterfanさん
基本的にJavascriptでの振り分けなどはしない方向で作業しなくてはならないのです。
ネガティブマージンを利用した方法というのを調べてみたいと思います。
情報ありがとうございます。

[9] mixiユーザー 01月06日 13:36

>基本的にJavascriptでの振り分けなどはしない方向で作業しなくてはならないのです。

むしろUAの振り分けを意識せずにスタンダードなCSSを書いておけば適用してくれるJavascript使用の方がお薦めなんですが……

<style type="text/css">
略
/* IE only */
hogehoge... {

}
/* */
hogehoge... {
min-width: 800px;
}
</style>

より

<script src="minmax.js" type="text/javascript" ></script>
<style type="text/css">
hogehoge... {
min-width: 800px;
}
</style>

の方がより良いと思います.
Javascript OFF 時もせいぜい画面が崩れる程度ですし

[10] mixiユーザー 01月06日 14:33

headerとfooterの高さを指定できるならかなり強引ですがこんなやり方をしてみました
http://css.nomaki.jp/0601052030.html

Macの挙動はわかりませんが･･･

[12] mixiユーザー 01月06日 16:05

＞Winterfanさん
Javascriptを使った振り分けは
上の人間の指示を仰がないと私の独断では使えないので、
どうしてもという場合は上の人間に一度相談してみようと思います。
振り分けて済む問題ならそれが一番だと私も思いますので。。
丁寧は解説ありがとうございます。

＞爽健美さん
試してくださってありがとうございます。
これはイケる！と思ったのですが、MacのIEだとヘッダー・フッター内の
文字がdiv外にはみだしてしまい、さらに800pxで止まってしまうという…
Mac嫌いです（泣

＞K@喫茶ふはつさん
試してくださってありがとうございます。
こちらもイケる！と思ったのですが、
やはりMacのIEだと伸びず。。。
もう、Mac大嫌いです（泣

みなさん色々と試してくださって本当にありがとうございます。
社内にcssに詳しい人間が居らず、ずっと本とネットを頼りに独自に勉強してきたので、
こうして他の方から知識を分けていただけるのが本当にうれしいです。
今作成しているサイトはこの仕事に就いて初めての
規模も求められるcss技術も大きいものなので、
どうしてもきっちり完成させたいと思ってます。

皆さんのレスを参考に再度いじってみたいと思います。
もしまた何かしら思いつくことがありましたら、
どんな小さなことでもかまいませんのでお力をお貸しいただけると嬉しいです。

またこちらにも進展がありましたら書き込ませていただきます。

[15] mixiユーザー 01月06日 18:38

＞しゃむむfeat.るるさん

「直下の要素に幅800px指定」の方法だと、
MacIE5で確認したところ
「ウィンドウを狭めると800px以下の幅になってしまう」
症状が出ていました。

Macは私もIE5の環境しかないもので、5.01～等の表示が気になるところです。
なにやら表示の具合が01と02ではずいぶん違うとかも聞いたので。。

[17] mixiユーザー 01月07日 04:46

全然解決になってないんですがこんなんどうすかね。

http://www.kaz.cc/sample060107/

実際本番のデザインがわからないのでアレですが
状況によってはこれもアリかなと。
ハックも振り分けも不要、WinMac共に一通りイケます。
てか無理やりです。。

ログインすると、残り8件のコメントが見れるよ