您现在的位置: 365建站网 > 365学习 > 用css固定div内容在页面的某个位置

用css固定div内容在页面的某个位置

文章来源:365jz.com     点击数:1323    更新时间:2010-12-31 00:35   参与评论

首先,我们将目光投向了CSS规范,我想很多人和我一样很快就想到了position属性,说到定位,我们很容易想到这个属性。这个属性一共有四个选项:static、relative、absolute、fixed。很高兴,我们在阅读了相关的注释后,我们大概能看到fixed是比较符合我们的需求的:

fixed:

位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。

于是我们很快就有了以下的代码,不过很遗憾,IE中并不能通过严格的测试,但是FireFox中却可以通过测试!

 

<HTML>

<head>

    <!--http://volnet.cnblogs.com-->

    <title>Only fit FireFox!  :(</title>

    <!--Some thing about the fixed style!-->

    <style type="text/css">

        .fixed_div{

            position:fixed;

            left:200px;

            bottom:20px;

            width:400px;

        }

    </style>

</head>

<body>

    <div class="fixed_div" style="border:1px solid #200888;">content, I'm content</div>

    <div style="height:888px;"></div>

</body>

</html>

不管上面上面说的IE7的strict模式,很显然,除了IE7,我们的挑战还有包括IE6在内的一大堆未知的因素。很显然,虽然这个方法通过了FireFox,但我们还是宣告失败了。

难道我们只能使用JavaScript让这一切继续“卡”下去么?(我指的是用JavaScript的时候效果很卡)

动滚动条的时候我们希望其中的一个指定的div不会跟着滚动条滚动。

滚动条,顾名思义,就是可以滚动的条(ScrollBar)(废话)。准确地说,滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候,为了能够让有限的空间展示无限的内容所作出的一个妥协的元素,使用它可以让我们查看当前页面内容之外部分的内容。

说到这里您估计都还很清楚,但既然我说滚动条也是一个元素,那么它是不是也在我们的HTML中呢?又或者它是浏览器的固有的一部分?

如果您觉得它是HTML中的一部分,那么您就对了,因为它是依附容器而存在的,而默认产生滚动条的容器是<body></body>或者<html></html>节,它并不是浏览器固有的一部分,浏览器只是默认完整展示了一整个html文档,并不知道它中间的内容究竟是否需要滚动条的支持。

看到滚动条的控制可以通过CSS的overflow的几个属性来控制,想必大家都不陌生了。

那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢?(虽说是模拟,但是效果一模一样噢~)

 

<html>

<head>

    <title></title>

    <style type="text/css">

        html,body {

            overflow:hidden;

            margin:0px;

            width:100%;

            height:100%;

        }

        .virtual_body {

            width:100%;

            height:100%;

            overflow-y:scroll;

            overflow-x:auto;

        }

        .fixed_div {

            position:absolute;

            z-index:2008;

            bottom:20px;

            left:40px;

            width:800px;

            height:40px;

            border:1px solid red;

            background:#e5e5e5;

        }

    </style>

</head>

<body>

<div class="fixed_div">I am still here!</div>

<div class="virtual_body">

    <div style="height:888px;">

        I am content !

    </div>

</div>

</body>

</html>

分析:

html,body:将默认可能会随机出现的滚动条,完全地隐藏了,这样不管您放了啥内容,它们都不会出来了。

.virtual_body:顾名思义,就是一个假的body了,它被设置为长宽都为100%的,意思就是它利用了所有可视的浏览器窗体显示所有的内容,并垂直允许出现滚动条。

.fixed_div:这下它可以利用绝对值进行定位了,因为在这个场景下,这个页面100%地被那个假冒的body给独霸了,而滚动条反正也出不来,您就可以自认为是在某个点蹲坑了,绝对安全。

想必您通过这些代码已经了解了新的方法不过是将一个div换作了之前的body。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (1323人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------