我有以下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)
+-------------------------------------+
看到这个小提琴