- 締切済み
ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- blueletter12345
- お礼率27% (26/94)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- hok212
- ベストアンサー率66% (100/150)
パーセント指定は、親要素に対してのパーセンテージとなることを覚えておきましょう。 つまり、ご提示されたソースでは、header要素の親要素は#containerとなり、#container要素の幅に1000pxを指定しているので、その内側に入る要素を100%にしても1000px以上には広がらないことになります。 ご要望を満たすには、headerとfooterを#containerの外に出すことが一番簡単です。
