/ fixed

IE6 中的固定定位

近来固定定位很火,页面没有个固定定位的东西你都不好意思。当然,有利于改善用户体验的都可以使用,具体可以到京东、新蛋的商品介绍页面体验一下。

固定定位本来很简单的一件事,但 IE6 面前就得费点心了。这个超过十年的古董级的浏览器,在国内还占据着巨大的份额,想不费心还不行。

1. 纯 CSS 方法:“假装”定位

说了是“假装”,就是用绝对定位模拟固定定位的效果。
<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>IE6 Position Fixed</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    html, body {
        height: 100%; /**/
    }

    * html {
        overflow: hidden; /**/
    }

    body {
        overflow: auto; /*滚动条放在body上*/
    }

    .fixed {
        position: fixed; /*向后兼容支持fixed的浏览器*/
        right: 10px;
        top: 100px;
        border: 1px solid red;
        background-color: #CCC;
        width: 200px;
        height: 300px;
    }

    * html .fixed {
        position: absolute; /*IE6*/
    }

&lt;/style&gt;

</head>
<body>
<div class="wrapper">
<p>All of your website content should be here.</p>
<script type="text/javascript">
for (var i = 0; i < 1000; i++) {
document.write('内容====================<br>');
}
</script>
</div>
<div class="fixed">
<p>This box is fixed.</p>
</div>
</body>
</html>


加注释(包括空的)的代码CSS规则是关键所在,原理是让 .fiexed 这个元素相对于 body 绝对定位,body 的高度被设置为 100% ,保持不变,所以 .fixed 元素的看起来就像固定定位一样。

不过也有点小问题:

  • “假装”固定定位的元素会覆盖浏览器滚动条(可以缩小浏览器窗口或者设置right:0试试),真正的固定定位位置相对于浏览器视口,不会出现这种情况;
  • 代码结构不够灵活;
  • 与 js 交互时可能会遇到其他问题。
参考链接:

2. Jonathan Snook 的经历

Jonathan Snook 早期个人网站的某一版本中,文章评论区域放在右侧并采用固定定位。经过一些列的尝试,最终采用 JavaScript 来解决固定定位问题。以下代码供参考:
function window_onscroll()
{

var el = document.getElementById('postcomment');
if(el!=null)
{
if(typeof(document.media)=='string')
{// only do this for ie
var s;
// scrolling offset calculation via www.quirksmode.org
if (self.pageYOffset){
s = self.pageYOffset;
}else if (document.documentElement && document.documentElement.scrollTop) {
s = document.documentElement.scrollTop;
}else if (document.body) {
s = document.body.scrollTop;
}
el.style.top= s + 30;
}

if(typeof(window.print)=='function')
{// only do if not ie
  var x;
  // scrolling offset calculation via www.quirksmode.org
  if (self.pageXOffset){ 
    x = self.pageXOffset;
  }else if (document.documentElement &amp;&amp; document.documentElement.scrollTop){ 
    x = document.documentElement.scrollLeft; 
  }else if (document.body) { 
    x = document.body.scrollLeft;
  }
  el.style.left = (548 - x) + "px";
}

}
}

3. 延伸:CSS Sticky Footer - CSS固定底部

显示器分辨率越来越高,有时候页面内容比较少,一个大色块的footer悬在半空很不雅观,Sticky Footer 应运而生。
<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer</title>
    <style type="text/css">
        /*
        Sticky Footer Solution
        by Steve Hatcher
        http://stever.ca
        http://www.cssstickyfooter.com
        */
    * { margin: 0; padding: 0; }

    html, body, #wrap { height: 100%; }
    body &gt; #wrap {
        height:auto;
        min-height: 100%; /* IE6 min-height hack */
    }

    #main {
        overflow: auto;
        padding-bottom: 150px; /* 必须和footer高度一样 */
    }

    #footer {
        position: relative;
        margin-top: -150px; /* footer高度负值 */
        height: 150px;
        clear: both;
        background-color: #1a1a1a;
        color: #ccc;
    }

    .cf:before,.cf:after {
        content: " ";
        display: table;
    }

    .cf:after {
        clear: both;
    }

    .cf {
        *zoom:1;
    }
&lt;/style&gt;

</head>
<body>

<div id="wrap">
<div id="main" class="cf">

&lt;/div&gt;

</div>

<div id="footer">
</div>
</body>
</html>


代码结构如上,把 footer 以外的东西全部丢到#main里面去就行,兼容的浏览器多得数不过来。

参考链接: