DIV固定在页面某个位置，不随鼠标滚动而滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0050)http://www.pmob.co.uk/temp/fixedlayoutexample5.htm -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Fixed header and footer for IE</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<STYLE type=text/css>BODY {
MARGIN: 0px
}
HTML {
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px
}
BODY {
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px
}
* HTML {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 0px
}
* HTML BODY {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 0px
}
* HTML #outer {
HEIGHT: 99.9%; OVERFLOW: auto; voice-family: inherit
}
* HTML #contain-all {
Z-INDEX: 1; POSITION: absolute; OVERFLOW-Y: scroll; WIDTH: 100%; HEIGHT: 100%
}
#top-bar {
Z-INDEX: 999; POSITION: absolute; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; HEIGHT: 50px; OVERFLOW: hidden; TOP: 0px; PADDING-TOP: 0px; LEFT: 0px
}
#topbar-inner {
BACKGROUND: red; HEIGHT: 50px
}
#footer-inner {
BACKGROUND: red; HEIGHT: 50px
}
* HTML #topbar-inner {
MARGIN-RIGHT: 17px
}
* HTML #footer-inner {
MARGIN-RIGHT: 17px
}
#footer {
Z-INDEX: 999; POSITION: absolute; WIDTH: 100%; BOTTOM: 0px; HEIGHT: 50px
}
.spacer {
HEIGHT: 50px
}
P {
MARGIN-TOP: 0px
}
HTML > BODY #top-bar {
POSITION: fixed
}
HTML > BODY #footer {
POSITION: fixed
}
</STYLE> <META name=GENERATOR content="MSHTML 8.00.7600.16490"></HEAD>
<BODY>
<DIV id=outer>
<DIV id=contain-all>
<DIV is an experimental layout and untested in a real situation but
preliminary results look good.</P>
<P>The header and footer need to be a fixed height and are therefore not suited
to large amounts of fluid content.</P>
<P>The code comments for ie are documented below as they needed to be removed
from the code for ie mac</P>
<P>* html, * html body{<BR>overflow:hidden;/* remove scroll mechanism from
body*/<BR>padding:50px 0;/* for ie5 and 5.5.*/<BR>margin:-50px
0;<BR>padd\ing:0;<BR>margin:0;<BR>}</P>
<P>* html #outer { <BR>overflow:auto;/* this is basically the root element
now*/<BR>height:100%;<BR>/* we need to make ie5 jump the next style block (
contain-all) so we use the voice hack*/<BR>voice-family: "\"}\"";
voice-family:inherit; <BR>}<BR>* html #contain-all{/* must contain all content
except for top and bottom bars - ie5 doesnt want this so jumps it as mentioned
above*/<BR>position:absolute;/* due to a bug in ie6 where children of elements
that have overflow defined behave as those they are
fixed*/<BR>overflow-y:scroll;<BR>width:100%;<BR>height:100%;<BR>z-index:1;<BR>}<BR></P>
<P> </P>
<P>some text to wrap : some text to wrap : some text to cause scrolling : : some
text to wrap : some text to wrap : some text to cause scrolling : : some text to
wrap : some text to wrap : some text to cause scrolling : : some text to wrap :
some text to wrap : some text to cause scrolling : : some text to wrap : some
text to wrap : some text to cause scrolling : : some text to wrap : some text to
wrap : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>some text to cause scrolling : </P>
<P>Last bit of text</P>
<DIV id=top-bar>
<DIV id=topbar-inner>Fixed Top & bottom- Demo works in IE5 IE5.5. and ie6 -
Firefox 1.0+, Mozilla 1.3+, NN 6.2, Opera 6.03 7.2 7.5,8 : (Mac OS X 10.4 -
FireFox 1.5.0.1, Safari 2.0.3 (417.8), IE 5.2 (5.2.3 (5815.1)) </DIV></DIV>
<DIV id=footer>
<DIV id=footer-inner>Fixed footer </DIV></DIV></BODY></HTML>
DIV固定在页面某个位置，不随鼠标滚动而滚动的更多相关文章
- div固定在浏览器的最上方，不随滚动条滚动
#topDIV { position: fixed; ; ; width: 100%; height: 35px; border-bottom: 1px solid #eee; background- ...
- 返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
- 控制div固定在页面的某个位置 ，用js感觉很麻烦 CSS更好一些
CSS代码:<style type="text/css"> html,body { width:100%; height:100%; margin:0px; paddi ...
- js把div固定在页面的右下角
在公司做材料系统中,需要做一个总是居于右下角的div,但是因为右边这部分本就是用iframe做的,所以是不好弄的. 一开始,以为用position:fixed,一句css就可以完成,结果在iframe ...
- 设置DIV随滚动条滚动而滚动
有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码
一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...
- 使用Div + CSS布局页面
在设计网页时,能够控制好各个模块在页面中的位置是非常关键的.本章将讲解利用Div+CSS对页面元素进行定位的方法. Div是HTML中指定的专门用于布局设计的容器对象 Div是CSS布局的核心对象. ...
- 【转载自W3CPLUS】如何将页脚固定在页面底部
该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...
- 让footer固定在页面（视口）底部（CSS-Sticky-Footer）
让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
随机推荐
- Internet基础
互联网是什么? Internet是一个互联网,它是将提供不同服务的,使用不同技术的,具有不同功能的物理网络互连起来而形成的. TCP/IP是一个协议集,它对Internet中主机的寻址方式,主机的命名 ...
- 用c++开发基于tcp协议的文件上传功能
用c++开发基于tcp协议的文件上传功能 2005我正在一家游戏公司做程序员,当时一直在看<Windows网络编程> 这本书,把里面提到的每种IO模型都试了一次,强烈推荐学习网络编程的同学 ...
- C++ 中使用boost::property_tree读取解析ini文件
boost 官网 http://www.boost.org/ 下载页面 http://sourceforge.net/projects/boost/files/boost/1.53.0/ 我下载的是 ...
- HTML5的优缺点是什么?
HTML5的优缺点是什么?作为HTML的第五次重大修改,HTML5有哪些改进?HTML5又有哪些缺点? 网络标准 HTML5本身是由W3C推荐出来的,它的开发是通过谷歌.苹果,诺基亚.中国移动等几百家 ...
- ajax终结篇
Ajax中post和get的区别 在ajax中有这个方法 xmlreq.open("post","servlet/MyServlet?time="+newDat ...
- MSSQL - 存储过程Return返回值
1.存储过程中不使用外部参数. 存储过程: SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ========================== ...
- [置顶] Android框架攻击之Fragment注入
为了适应越来越大的设备屏幕,Android在3.X后引入了Fragment概念,作用是可以在一个屏幕上同时显示多个Activity,以达到充分利用屏幕的目的.关于Fragment的使用说明,可以阅读& ...
- SQL Server Join方式
原文:SQL Server Join方式 0.参考文献 Microsoft SQL Server企业级平台管理实践 看懂SqlServer查询计划 1.测试数据准备 参考:Sql Server中的表访 ...
- Spring Boot 分布式Session状态保存Redis
在使用spring boot做负载均衡的时候,多个app之间的session要保持一致,这样负载到不同的app时候,在一个app登录之后,而打到另外一台服务器的时候,session丢失. 常规的解决方 ...
- biz处理dao事务处理层
前言 正文 1.创建一个事物管理对象,该对象将连接对象绑定到当前线程 2.dao层的代码演示样例 3.biz层处理数据库的事务 总结