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>

 

转载于:https://www.cnblogs.com/tonykent/archive/2009/07/03/1516405.html