CSS設定畫面停靠的底側邊欄

為了達到畫面中出現底側邊欄, 並隨著視窗一直貼在底部, 產生如下效果

首先加入如下樣式

Code
 1    <style type="text/css">
 2        body{
 3            margin: 0;
 4            padding: 0;
 5            border: 0;
 6            overflow: hidden;
 7            height: 100%; 
 8            max-height: 100%; 
 9        }
10        #divBottom{
11            position: absolute; 
12            bottom: 0; 
13            text-align: center;
14            overflow: hidden;
15            
16            background-color: #EBEAE4;
17            margin: 1px 0px 0px 0px; 
18            clear: both; 
19            width: 780px;
20        }
21        #maincontent{
22            top: 0;
23            left: 0;
24            right: 0;
25            bottom: 0px;
26            overflow-y: auto; 
27            background: #fff;
28        }
29        
30        * html body{ /**//*IE6 hack*/
31            padding: 0 0 0 0;
32        }
33        * html #maincontent{ /**//*IE6 hack*/
34            height: 100%; 
35            width: 100%; 
36        }
37    </style>

再將畫面把所有內容都包含在內的Div取名為
<div id='maincontent'>
當然, 此div不能包括我們浮動在底端的那個div, 底端的div應寫在上述div與form之間
<div id='divBottom'>

最後, 再加一段javascript, 用來控制瀏覽器大小變化的時候樣式依舊

Code
1    <script language="javascript" type="text/javascript">
2        function divOnScroll() {
3            maincontent.style.height = document.documentElement.clientHeight + document.documentElement.scrollTop;
4        }
5
6        window.onresize = divOnScroll;
7    </script>