求问怎样使控件的位置位于浏览器窗口底部

我在页面上放了一个自定义控件,写了一些常用的功能,我想把这个控件的位置定位在浏览器窗口的底部,也就是说页面可能比较长,有滚动条,但这个控件的位置永远在浏览器窗口的底部,而不是在页面的底部,求问高手该怎么实现这个功能呢.
就好像校内网的底部聊天窗口那样,一直位于浏览器底部.

解决方案 »

  1.   

    招了个类似的代码。自己修改一下相信能用<!-------------------------------------------文件名：23.2.htm-------------------------------->
    <html>
    <head>
    <title>随页面滚动的对联广告</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head>
    <body>
    <center><h1>随页面滚动的对联广告</h1><hr></center>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>
    <script language="JavaScript">
    <!--
    var delta=0.8;
    var collection;
    var closeB=false;
    function floaters()
    {
    this.items= [];
    this.addItem= function(id,x,y,content)
    {    //向页面写入一个<div>
    document.write('<DIV id='+id);
    document.write(' style="Z-INDEX: 10; POSITION: absolute;width:80px; height:60px;');
    document.write('left:'+(typeof(x)=='string'?eval(x):x));
    document.write(';top:'+(typeof(y)=='string'?eval(y):y)+'">');
    document.write(content+'</DIV>');var newItem= {};
    //获取元素属性
    newItem.object= document.getElementById(id);
    newItem.x= x;                    //设置横坐标
    newItem.y= y;                    //设置纵坐标this.items[this.items.length]= newItem;
    }
    this.play= function()
    {
    collection= this.items;
    setInterval('play()',30);             //调用函数play()
    }
    }
    function play()
    {
    if(screen.width<=800 || closeB)
    {
    for(var i=0;i<collection.length;i++){              //设置显隐属性
    collection[i].object.style.display= 'none';
    }
    return;
    }
    for(var i=0;i<collection.length;i++)
    {
    var followObj= collection[i].object;
    var followObj_x= (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
    var followObj_y= (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);//设置左边位置
    if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x))
    {
    var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
    dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
    followObj.style.left=followObj.offsetLeft+dx;
    }//设置顶部位置
    if(followObj.offsetTop!=(document.body.scrollTop+followObj_y))
    {
    var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
    dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
    followObj.style.top=followObj.offsetTop+dy;
    }
    followObj.style.display= '';
    }
    }function closeBanner()                     //函数：关闭
    {
    closeB=true;
    return;
    }var theFloaters= new floaters();
    //添加广告图像
    theFloaters.addItem('followDiv1','document.body.clientWidth-106',80,'<img src="ad-01.gif" alt="广告内容二"><br><br><img src=close.gif onClick="closeBanner();">');
    theFloaters.addItem('followDiv2',6,80,'<img src="ad-01.gif" alt="广告内容一"><br><br><img src=close.gif onClick="closeBanner();">');
    theFloaters.play();
    //页面其他内容显示输出
    for(var i=0;i<20;i++)
    {
    document.write("<center>这里是页面内容！</center>");
    }
    //-->
    </script>
    </p>
    </body>
    </html>
      

  2.   

    <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"><head>
    <style type="text/css">
    <!--
    body {
    background: #FFF;
    color: #000;
    font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10px;
    padding: 0
    }table, td, a {
    color: #000;
    font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
    }.td
    {
    nowrap:‘’true‘’;
    }div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 285px;
    overflow: auto;
    width: 100%;
    }/* WinIE 6.x needs to re-account for it‘’s scrollbar. Give it some padding */
    \html div.tableContainer/* */ {
    padding: 0 16px 0 0
    }/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
    html>body div.tableContainer {
    height: auto;
    padding: 0;
    width: 740px
    }/* Reset overflow value to hidden for all non-IE browsers. */
    /* Filter out Opera 5.x/6.x and MacIE 5.x */
    head:first-child+body div[class].tableContainer {
    height: 285px;
    overflow: hidden;
    width: 756px
    }/* define width of table. IE browsers only */
    /* if width is set to 100%, you can remove the width */
    /* property from div.tableContainer and have the div scale */
    div.tableContainer table {
    float: left;
    width: 100%
    }/* WinIE 6.x needs to re-account for padding. Give it a negative margin */
    \html div.tableContainer table/* */ {
    margin: 0 -16px 0 0
    }/* define width of table. Opera 5.x/6.x and MacIE 5.x */
    html>body div.tableContainer table {
    float: none;
    margin: 0;
    width: 740px
    }/* define width of table. Add 16px to width for scrollbar. */
    /* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
    head:first-child+body div[class].tableContainer table {
    width: 756px
    }/* set table header to a fixed position. WinIE 6.x only */
    /* In WinIE 6.x, any element with a position property set to relative and is a child of */
    /* an element that has an overflow property set, the relative value translates into fixed. */
    /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
    thead.fixedHeader tr {
    position: relative;
    /* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
    top: expression(document.getElementById("tableContainer").scrollTop)
    }
    /* set THEAD element to have block level attributes. All other non-IE browsers */
    /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
    /* Filter out Opera 5.x/6.x and MacIE 5.x */
    head:first-child+body thead[class].fixedHeader tr {
    display: block
    }/* make the TH elements pretty */
    thead.fixedHeader th {
    background: #C96;
    border-left: 1px solid #EB8;
    border-right: 1px solid #B74;
    border-top: 1px solid #EB8;
    font-weight: normal;
    padding: 4px 3px;
    text-align: center
    }/* make the A elements pretty. makes for nice clickable headers */
    thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
    color: #FFF;
    display: block;
    text-decoration: none;
    width: 100%
    }/* make the A elements pretty. makes for nice clickable headers */
    /* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
    thead.fixedHeader a:hover {
    color: #FFF;
    display: block;
    text-decoration: underline;
    width: 100%
    }/* define the table content to be scrollable */
    /* set TBODY element to have block level attributes. All other non-IE browsers */
    /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
    /* induced side effect is that child TDs no longer accept width: auto */
    /* Filter out Opera 5.x/6.x and MacIE 5.x */
    head:first-child+body tbody[class].scrollContent {
    display: block;
    height: 262px;
    overflow: auto;
    width: 100%
    }/* make TD elements pretty. Provide alternating classes for striping the table */
    /* http://www.alistapart.com/articles/zebratables/ */
    tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
    background: #FFF;
    border-bottom: 1px solid #EEE;
    border-left: 1px solid #EEE;
    border-right: 1px solid #AAA;
    border-top: 1px solid #AAA;
    padding: 2px 3px
    }tbody.scrollContent tr.alternateRow td {
    background: #EEE;
    border-bottom: 1px solid #EEE;
    border-left: 1px solid #EEE;
    border-right: 1px solid #AAA;
    border-top: 1px solid #AAA;
    padding: 2px 3px
    }/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
    /* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
    /* Add 16px to last TH for scrollbar padding */
    /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
    head:first-child+body thead[class].fixedHeader th {
    width: 200px
    }head:first-child+body thead[class].fixedHeader th + th {
    width: 250px
    }head:first-child+body thead[class].fixedHeader th + th + th {
    border-right: none;
    padding: 4px 4px 4px 3px;
    width: 316px
    }/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
    /* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
    /* Add 16px to last TH for scrollbar padding */
    /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
    head:first-child+body tbody[class].scrollContent td {
    width: 200px
    }head:first-child+body tbody[class].scrollContent td + td {
    width: 250px
    }head:first-child+body tbody[class].scrollContent td + td + td {
    border-right: none;
    padding: 2px 4px 2px 3px;
    width: 300px/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */ 
    top: expression(document.getElementById("tableContainer").scrollTop)
    }
    -->
    </style>
    </head>
      

  3.   

    ><body>
    <div id="tableContainer" class="tableContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
    <thead class="fixedHeader">
    <tr>
    <th><a href="#">Header 1</a></th>
    <th><a href="#">Header 2</a></th>
    <th><a href="#">Header 3</a></th>
    <th><a href="#">Header 4</a></th>
    <th><a href="#">Header 5</a></th>
    <th><a href="#">Header 6</a></th>
    <th><a href="#">Header 7</a></th>
    </tr>
    </thead>
    <tbody class="scrollContent">
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 4</td>
    <td>Cell Content 5</td>
    <td>Cell Content 6</td>
    <td>Cell Content 7</td>
    </tr>
    <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    <td>More Cell Content 4</td>
    <td>More Cell Content 5</td>
    <td>More Cell Content 6</td>
    <td>More Cell Content 7</td>
    </tr>
    <tr>
    <td nowrap>Even More Cell Content 1</td>
    <td nowrap>Even More Cell Content 2</td>
    <td nowrap>Even More Cell Content 3</td>
    <td nowrap>Even More Cell Content 4</td>
    <td nowrap>Even More Cell Content 5</td>
    <td nowrap>Even More Cell Content 6</td>
    <td nowrap>Even More Cell Content 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 4</td>
    <td>And Repeat 5</td>
    <td>And Repeat 6</td>
    <td>And Repeat 7</td>
    </tr>
    </tbody>
    </table>
    </div></body></html>
    我这个是css控制表头不动的一个例子，希望能对你有帮助~
      

  4.   

    html中有现成的标签,将自定义控件的ID加入到所要加入的页面当中