CSS sets the bottom sidebar for screen docking

In order to display the bottom sidebar on the screen and stick it to the bottom of the window, the following effect is generated:

First, add the following style

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;
32}
33 * html # maincontent {/** // * IE6 hack */
34 Height: 100%;
35 width: 100%;
36}
37 </style>

Then, name the DIV containing all the content on the screen.
<Div id = 'maincontent'>
Of course, this Div cannot include the DIV that we float at the bottom. The DIV at the bottom should be written between the DIV and form above.
<Div id = 'divbottom '>

Finally, add a piece of JavaScript to control the style when the browser size changes.

Code
1 <script language = "JavaScript" type = "text/JavaScript">
2 function divonscroll (){
3 maincontent. style. Height = document.doc umentelement. clientheight + document.doc umentelement. scrolltop;
4}
5
6 window. onresize = divonscroll;
7 </SCRIPT>