横幅可変表示がうまくいきません

質問

cssを学んでいます。
横幅可変のページを作っており、可変ページの中に写真を配置する部分があるのですが
ウインドウを狭く縮めたとき、ウインドウ一杯に表示させておきたいヘッダー部分が、スクロール先には表示されなくなってしまうのです。

うまく説明できないのですが…

■■■■■　←ヘッダー（ウインドウも同じ幅）
┏━━┓┏━━┓
┃写真┃┃写真┃
┗━━┛┗━━┛

ヘッダーに対する記述は以下の通りです。

div#header {
width: 100%;
text-align: left;
background-image: url(../img/hd-bg_s.gif);
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

恐らくとても初歩的な質問なのですが、検索でうまく過去の質問を探し出すことが出来なかったので、ご存じのかたがいらっしゃいましたら教えて頂けるとありがたいです。
よろしくお願いいたします。

回答No.1

grumpy_the_dwarf · ベストアンサー

width: 100%;のヘッダが、ウィンドウの幅一杯に表示されているの
だから、何も問題はありません。指定どおりです。

「横幅可変」といいながらウィンドウ幅からはみ出すオブジェクト
が存在するのが格好悪い原因なので、あらかじめヤバそうな写真に
max-widthを%で指定してしまいましょう。ウィンドウ幅が足りない
時は画像が縮むようにできます。

お礼

回答へのお礼の付け方が解らず、時間が経ってしまいすみませんでした。

自分は仕組み、理屈をもっと学ばねばいけませんね。
どうもありがとうございます。