ヘッダーとフッターを画面いっぱいにしたい時について

添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。
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>

yoshinavi

2019/02/27 17:23

コードはコードブロックで、なるべくきちんとインデントをつけて表示させてください。見やすい、読みやすいコードだと、回答側も理解しやすくなり、より多くの回答を得れるようになるかと思います。

yoshinavi

2019/02/28 04:30

＞うまくいきませんでした。　→　どこがどのように、うまくいかなかったのか、そこの説明を詳しく提示してください。 CSSのセレクタ名称や、プロパティ値の記入方法に不備が見られますので、提示と併せて見直してみてください。

行動規範の内容に同意します

回答1件

ベストアンサー

https://codepen.io/anon/pen/KEMVzz
こんな感じでできるよってところまで。

メインコンテンツとかの配置はてきとー
ヘッダフッタの高さもてきとー
おすきに変えて使ってください

いちおーコードはりますね
HTMLは```<div id=container>

<header> ヘッダー </header> <nav>なび </nav> <main>めいん </main> <footer> フッター </footer> </div> ```

* {
  margin: 0;
  padding: 0;
}
#container {
  width: 1000px;
  margin: 0 auto;
  padding-top: 100px;
}
#container > * + * {
  margin-bottom: 1em;
}

header,
footer {
  position: fixed;
  width: 100%;
  height: 100px;
  left: 0;
}
header {
  top: 0;
  background-color: red;
}

footer {
  bottom: 0;
  background-color: green;
}

nav {
  width: 100%;
  height: 50px;
  background-color: blue;
}
main {
  width: 100%;
  height: 150px;
  background-color: yellow;
}


```CSSはこんな感じ

投稿2019/02/27 14:53

編集2019/03/03 17:07