html右下角窗口制作,第一个想到的方式是JavaScript控制,但是这种情况下,在页面上下滚动的时候会有抖动,通过以下方法可以实现没有一点抖动的可能。使用HTML和CSS来实现,简单,容易理解。

1、 创建HTML页面
2、 编写一下CSS内容
body{
                    height:100%;
                    overflow:hidden;
                    margin:0px;
                    padding:0px;
                    }
html{
        overflow:hidden;
                    height:100%
        }
3、 HTML页面BODY中,添加一个DIV,(主显示区,所有内容都显示在那里)。
4、 CSS样式如下
height: 100%;
overflow: auto;
5、 在BODY下,再添加一个div。显示在右下角
6、 CSS样式如下
.showRightOverFlow{
            width:300px;
            height:300px;
            position:absolute; //必须
            right:22px;        /
            bottom:20px;
            border: solid 1px #432B6A;
            z-index:99999;
        }
这个原理很简单,就是把BODY和HTML两个标签的作用去掉,全部使用主显示用的 DIV来体现显示主题。这样就能随意的显示DIV的位置。不用考虑浏览器中body和其他属性的不同。因为DIV在同不同的浏览器下都是一样的。
7、 以上代码测试成功的浏览器有 IE8,FireFox8.0,Opera11.6,Google Chrome 16,Safari5等,测试通过。

     IE效果:

 

FireFox效果:

 

 

Opera效果:

  

 

Chrome效果图:

  

 

Safari效果图:   

 

全部代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="">
<head>
    <title>Untitled Page</title>
    <style>
        body{
   height:100%;
   overflow:hidden;
   background-color:#432B6A;
   }
        html{
         overflow:hidden;
   height:100%
        }

        .showRightOverFlow{
            width:300px;
            height:300px;
            position:absolute;
            right:22px;
            bottom:20px;
            border: solid 1px #fff;
            z-index:99999;
   background-color:#888888;
        }
    </style>
</head>
<body>
    <div style="height: 100%; overflow: auto;">
        主显示区域
    </div>
    <div class="showRightOverFlow">
  右下角
    </div>
</body>
</html>