[解決済み] position fixed が動作しない

質問

以下のような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;}

しかし、なぜヘッダーとフッターは固定されていないのでしょうか、何か間違ったことをしたのでしょうか？メインのみスクロール可能で、ヘッダーとフッターは固定にしたいのですが、どうすればよいでしょうか？

+-------------------------------------+
|     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 .