質問: ヘッダーとフッターを次の画像のように 画面いっぱいに拡大したいです。 ![理想](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/8554a5ef85461232b2824e1a16c776c4.jpeg) ところが、下図のように ヘッダーは下以外すべてに空白ができ、 フッターは上下左右すべてに空白ができ、 文字が上にぴったりとくっついてしまいます。 ![現実](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/236ba07539b7771dfdba195acba8e49a.jpeg) どこを直せば、上図のように ヘッダー、フッターの空白がなくなって 画面いっぱいにひろがり、 文字はヘッダー、フッターの中央に入りますでしょうか? よろしくお願いします。 ``` header wrapper footer ``` ``` header { background-color: rgb(10,10,10); height: 100px; width: 100px; } header p{ text-align: center; color: rgb(0,0,0); } body { background-color:rgb(200,200,200); } .wrapper{ background-color:rgb(240,240,240); width: 640px; display: block; margin: 0 auto; } footer { background-color: rgb(10,10,10); height: 100px; width: 100& } footer p{ text-align: center; color: rgb(0,0,0); } ```
回答: wrapper要素は無いので、div要素でも使いましょう。 ``` wrapper ``` ヘッダーなどは、中の要素(p)のmarginが外に漏れるため、clerfixするかoverflow: hidden;するかすれば解決できると思います。 ``` body { margin: 0; } header, .wrapper, footer { overflow: hidden; } ``` 【clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix | コリス】