CSS 固定div不随屏幕滚动

固定某一元素不滚动感觉还是挺有用的，一侧边栏不动而滚另一侧，固定导航条，而固定footer则比较少见，关于footer，还要做一些特殊处理，之后会有说明。

当然，感觉代码还不好，需要改进=A=

左右比较简单，我们利用float和position的联合就能实现，下面代码中所实现的是左边栏固定。

演示

首先我们来看一下css的部分。

        html,body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .container {
            margin: 0 auto;
            width: 100%;
            height: 100%;
        }

        .left {
            position: fixed;
            width: 20%;
            border:1px solid;
            height:100%;
            float:left;
        }

        .right {
            width: 78%;
            border:1px solid;
            float: right;
            height:888px;
        }

这里因为border也会占用一定的空间，所以width设定的比较宽松。

关于html,body的处理，可以见：CSS div高度自适应屏幕，以备不时之需。

关于fixed属性，W3School有所提及，这里我们给一个新地址的链接，感觉很不错：http://css.doyoe.com/properties/positioning/position.htm

右侧height仅是做测试之用。

然后我们引入html部分测试，css自行引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Left-Right</title>

</head>
<body>
    <div class="container">
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>
</body>
</html>

顶部和底部我们当然可以用相同的方法，但有一个很蛋疼的地方在于fixed有个类似于float的性质，目前我不知道如何改变，只能通过padding把header和footer占用的位置空出，以防止元素被这两货挡住，当然header还有别的方法固定（如果是导航条的话）可见演示

还有一种不错的方法，没有试验过：http://www.phpddt.com/dhtml/875.html

关于我的方法可见：CSS 对底部应该做的处理

搜到的，只贴出源码吧OTZ。

<!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" /> 
<title>CSS定义一个固定在页面顶部的层</title> 
<style type="text/css"> 
    body { 
        height:1200px; 
        margin: 0; 
        padding: 0; 
        background-attachment: fixed; /* prevent screen flash in IE6 */ 
    } 
    div,ul{margin: 0;padding: 0;} 
    #topNavWrapper { 
        width: 980px; 
        text-align: left; 
        height: 31px; 
        margin: 0px auto; 
        z-index:100; 
        _position: relative ; 
        _top:0px; 
    } 
    #topNav { 
        width: 980px; 
        float: left; 
        display: block; 
        z-index: 100; 
        overflow: visible; 
        position: fixed; 
        top: 0px; /* position fixed for IE6 */ 
        _position: absolute; 
        _top: expression(documentElement.scrollTop + "px"); 
        background-image: url( /uploadfile/2012/0717/0717014456145_4456.gif); 
        background-repeat: no-repeat; 
        background-position: right; 
        height: 31px; 
        line-height: 31px; 
        color:#fff; 
        background-color:#444; 
        text-align:center; 
    } 
</style> 
</head> 
<body> 
<div id="topNavWrapper"> 
<ul class="jd_menu" id="topNav"> 
我是固定在页面顶部的层 
</ul> 
</div> 
</body> 
</html>

植入部分

如果您觉得文章不错，可以通过赞助支持我。

如果您不希望打赏，也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 成品, 源码, 代码段, 存疑

添加新评论