[解決済み】位置固定が機能しない

質問内容

以下のようなhtmlがあるのですが...。

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

そして、以下のCSSは...

.header{
position: fixed;
background-color: #f00;
height: 100px;
}
.main{
background-color: #ff0;
height: 700px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;}

しかし、なぜヘッダーとフッターは固定されていないのでしょうか？何か間違ったことをしたのでしょうか？私は、"main"のみスクロール可能で、"header"と"footer"は固定位置でありたいです。どうしたらいいでしょうか？

+-------------------------------------+
|     header                          |  -> at fixed position (top of window)
+-------------------------------------+
|       main                          |
|                                     |
|                                     | -> scrollable as its contents
|                                     |    scroll bar is window scroll bar not of main
|                                     |
|                                     |
+-------------------------------------+
|         footer                      |  -> at fixed position (bottom of window)
+-------------------------------------+

参照 このフィドル

解決方法は？

ヘッダーとフッターに明示的に幅を与える必要があります。

width: 100%;

作業用フィドル

もし、真ん中の部分を隠さないようにしたい場合は、次のようにします。 position: absolute;width: 100%; を設定し top and bottom プロパティ（ヘッダーとフッターの高さに関するもの）を設定し、親要素に position: relative . (もちろん height: 700px; を指定し、スクロールできるようにするために overflow: auto .