css 兼容 position:fixed
有多少内容,我就有多高
我要随滚动条滚动
我要随滚动条滚动
<!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的更多相关文章
- 小技巧css解决移动端ios不兼容position:fixed属性,无需插件
移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...
- 让IE6兼容position:fixed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
- IOS系统不兼容position: fixed;属性的解决方案
position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...
- CSS中position:fixed的用法
我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...
- CSS中position:fixed的相关用法
CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...
- position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
- 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法
在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...
- ios position:fixed 上滑下拉抖动
ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...
随机推荐
- C语言宏定义函数中的“_##”的意思
最近在看google vp9的代码的时候碰到: #define intra_pred_sized(type, size) \ void vp9_##type##_predictor_##size##x ...
- 近5年133个Java面试问题列表
Java 面试随着时间的改变而改变.在过去的日子里,当你知道 String 和 StringBuilder 的区别就能让你直接进入第二轮面试,但是现在问题变得越来越高级,面试官问的问题也更深入. 在我 ...
- 1 weekend110的NN元数据管理机制 + NN工作机制 + DN工作原理
第一天的笔记,是伪分布hadoop集群搭建, 后面是hadoop Ha的分布式集群搭建 第一天,是HDFS的shell操作 NN工作机制 里面是二进制 DN工作原理 上传完了之后,在hdfs的虚拟路径 ...
- CF 19D 线段树+set压缩坐标轴+离散化map
题意: n个操作,在200000*200000的平面上加删点 find 严格在坐标右上角,x最小,再y最小的点 线段树做,区间为离散化后的 X轴坐标 ,维护区间点数 和 最小的 y 值 ( 维护最小y ...
- Servlet/jsp 中 获取页面所有传递参数
Enumeration en = request.getParameterNames(); while(en.hasMoreElements()){ String el = en.nextElemen ...
- Guava库
Guava是一个非常棒的库,它就是Java标准库"所缺失的那部分",是一个 Google 的基于java1.6的类库集合的扩展项目,包括 collections, caching, ...
- java版本 ueditor 在线编辑器 配置
上传文件大小的配置 1. ueditor\dialogs\video\video.js 搜索 file_size_limit 修改这个数值 (这是前台 flash的限制) 2. ueditor ...
- Linux进程管理—信号、定时器
信号: 1. 信号的作用: 背景: 进程之间通信比较麻烦. 但进程之间又必须通信,比如父子进程之间. 作用: 通知其他进程响应.进程之间的一种通信机制. 信号: 接受信号的进程马上停止,调 ...
- spring 整合JDBC
使用Spring提供的三个JDBC模板类(JdbcTemplate.NamedParameterJdbcTemplate.SimpleJdbcTemplate)操作数据库 一.JdbcTemplate ...
- park、unpark、ord 函数使用方法(转)
park,unpark,ord这3个函数,在我们工作中,用到它们的估计不多. 我在最近一个工作中,因为通讯需要用到二进制流,然后接口用php接收.当时在处理时候,查阅不少资料.因为它们使用确实比较少, ...