我是头
我是主体
有多少内容，我就有多高

 

我是脚

我要随滚动条滚动
我要随滚动条滚动
我要随滚动条滚动 
<!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" />
<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"><!--据说这个可以只需要兼容IE7-->
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0; border:0;}

#d{
    background:url(images/index_bg.jpg) repeat-y scroll center top transparent;
    left: 50%;
    margin-left: -500px;
    position: relative;
    width: 1000px;
    }

.top,.main,.bottom,.fixed{text-align:center;}

.top{
    background-color:#C30;
    height: 101px;
    padding-top: 4px;
}

.main{
    width:980px;
    margin:20px auto 0;
    background-color:#FC0;
    padding:10px;
}
.main .cont{height:900px;}

.main .cont .contL,.main .cont .contR{
    float:left;
}

.main .cont .contL{
    width:750px;
    background-color:#93C;
    height:900px;
    margin-right:15px;
}

.main .cont .contR{
    width:210px;
    background-color:#33F;
    height:500px;
    }

.bottom{
    background-color:#00F;
    clear: both;
    color: #373737;
    height: 192px;
    margin: 10px auto;
    overflow: hidden;
    padding-top: 20px;
    width: 1000px;
}

.fixed{
    width:190px;
    line-height:40px;
    padding-top:20px;
    padding-bottom:20px;
    background-color:#999;
    position:fixed;
    left:65%;
    top:160px;
    z-index:999;/*为了让DIV永远在最前面，不被其他元素遮住*/
    _position:absolute;/*这里开始的2句代码是为ie6不兼容position:fixed;而写的*/
    _top:expression(eval(document.documentElement.scrollTop+160));/*这里需要获取滚动高度+元素原本的高度*/
}
</style>
</head>

<body>
    <div id="d">
        <div class="top">我是头</div>
        <div class="main">
        我是主体<br />
        有多少内容，我就有多高<br />
        <div class="cont">
            <div class="contL"></div>
            <div class="contR"></div>
        </div>
        </div>
        <div class="bottom">我是脚</div>
    </div>
    <div class="fixed">
    我要随滚动条滚动<br />
    我要随滚动条滚动<br />
    我要随滚动条滚动<br />
    </div>
</body>
</html>

css 兼容 position:fixed的更多相关文章

  1. 小技巧css解决移动端ios不兼容position:fixed属性，无需插件

    移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...

  2. 让IE6兼容position:fixed

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css中position:fixed实现div居中

    上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...

  4. IOS系统不兼容position: fixed;属性的解决方案

    position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...

  5. CSS中position:fixed的用法

    我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...

  6. CSS中position:fixed的相关用法

    CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...

  7. position:fixed 兼容浏览器低版本

    项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...

  8. 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

    在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...

  9. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

随机推荐

  1. 文件上传工具swfupload[转]

    转至:http://zhangqgc.iteye.com/blog/906419 文件上传工具swfupload 示例: 1.JavaScript设置SWFUpload部分(与官方例子类似): var ...

  2. 第一个小项目（天气预报软件）——称"酷狗天气"

    一.创建数据库和表 分析: 二.遍历全国省市县数据 分析: 三.显示天气信息 分析: 四.切换城市和手动更新天气 分析: 五.后台自动更新天气 分析:

  3. java 大数据处理之内存溢出解决办法（一）

    http://my.oschina.net/songhongxu/blog/209951 一.内存溢出类型 1.java.lang.OutOfMemoryError: PermGen space JV ...

  4. 关于wordpress在修改固定链接后，总显示Not Found的问题

    参考来源: http://chinablog.blog.51cto.com/276793/280278 一.问题背景 使用wordpress搭建网站,为了让文章URL看起来漂亮一点,wordpress ...

  5. Unity3D中Prefab

    Prefab概念: Prefab是一种资源类型--存储在项目视图中的一种可反复使用的游戏对象.因而当游戏中须要非常多反复使用的对象.资源等时,Prefab就有了用武之地.它拥有下面特点: 能够放到多个 ...

  6. MFC 一个类訪问还有一个类成员对象的成员变量值

    作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/35263857 MFC中一个类要訪问另外一个类的的对象的成员变量值,这就须要获得 ...

  7. Android（java）学习笔记179：BroadcastReceiver之 有序广播和无序广播（BroadcastReceiver优先级）

    之前我们在Android(java)学习笔记178中自定义的广播是无序广播,下面我们要了解一下有序广播:   1.   我们首先了解一下有序广播和无序广播区别和联系? (1) 有序广播> 接受者 ...

  8. ASP.NET分页存储过程，解决搜索时丢失条件信息

    存储过程: -- ============================================= -- Author: -- Create date: -- Description: 分页 ...

  9. c语言学习之基础知识点介绍（五）：关系运算式和逻辑运算式

    本节主要说关系运算式和逻辑运算式. 一.关系运算式 1.等于(==):判断左边的表达式是否等于右边的表达式 2.大于(>):判断左边的表达式是否大于右边的表达式 3.大于等于(>=):判断 ...

  10. SQL小细节

    平时有些小细节,不留意的话很容易得到错误的答案,我们来看下下面的代码,看看你是否能答对呢? ) ,) SELECT @str = '中国CH',@info='MyTest' SELECT [字符串]= ...