HTML頁面右下角顯示窗體

         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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章