對網(wǎng)頁中層的固定實(shí)現(xiàn)代碼

2024-07-11 08:34:41

字體：大中小

供稿：網(wǎng)友

對于DIV+CSS不熟悉的我，為此加班加點(diǎn)在項(xiàng)目上線時把問題解決了。參考代碼如下：

<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html”; charset=”GBK”/>
<title>固定上下層的位置</title>
<style type=”text/css”>
<!–
body {
background-image: url(0);
background-attachment: fixed;
}
#BottomNav {
background: #9F6;
z-index: 999;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
position:fixed;
top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
overflow: visible;
}
#topNavWrapper {
height: 30px;
margin: 0px auto;
width:100%;
z-index:100;
position:fixed ;
top:0px;
left:0;
background: #9F6;
}
#center
{
width: 100%;
height:100%;
padding-top:30px;
padding-bottom:30px;
}
–>
</style>
</head>
<body>
<div id=”topNavWrapper”>固定懸浮導(dǎo)航在此處,不隨滾動條的滾動變化</div>
<div id=”center”>
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
我是中間層
</div>