经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何滚动滚动条,位置不变,就例如经常看到的弹出广告。方法一般是使用js控制,或者使用css。这里我写的是css的控制方法。css属性"position:fixed",它的作用就是将元素相对于窗口固定位置。
目的:导航放在底端,不管a的框架高度如何,b始终是在底端.
调试环境:IE7,IE8.
结果:达到预期目的.
测试代码如下:
<!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=utf-8" /> </head> <style type="text/css"> #a{ margin:0 auto; height:700px; width:960px;; color:#fff; background:#000000; /*overflow:hidden;*/ } #b{ position:fixed; margin:0 auto; height:60px; width:100%; bottom:0px;/*定义区块距离网页顶部100px*/ left:0px; right:0px; background:red; /*overflow:hidden;*/ } </style> <div id="a"> </div> <div id="b"></div>