以下例子資訊來自http://www.uecss.com/index.php/fixed-floating-imitation-navigation/
頁面加入樣式:
Code
body {
background-image:url(text.txt); /* for IE6 */
background-attachment:fixed;
}
.bottomNav {
background-color:#096;
z-index:999;
position:fixed;
bottom:0;
left:0;
width:100%;
_position:absolute; /* for IE6 */
_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */
overflow:visible;
}
將要顯示的DIV加上
Code
class="bottomNav"
下邊這個是原創,也是純CSS實現:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>懸浮視窗</title>
<style type="text/css">
HTML {
OVERFLOW: hidden;
HEIGHT: 100%;
}
BODY {
BACKGROUND:#999;
MARGIN: 0px;
OVERFLOW:auto;
WIDTH: 100%;
HEIGHT: 100%;
}
#flow_wbox {
BACKGROUND:#333;
DISPLAY: block;
FLOAT: none;
BOTTOM: 0px! important;
POSITION: absolute;
WIDTH: 100%;
HEIGHT: 60px
}
</style>
</head>
<body>
<div style="height: 1000px;">
abc
</div>
<div id="flow_wbox">
這裡是懸浮視窗!!
</div>
</body>
</html>
