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 ...
随机推荐
- hdu5338 ZZX and Permutations
hdu5338 ZZX and Permutations 非原创,来自多校题解 不是自己写的,惭愧ing…… 留着以后自己参考…… lower_bound {1,2,4,5} 询问 2,返回的是 2 ...
- pssh,pscp,pslurp使用实践
因为常常须要到几十台机器上运行同样的命令,而眼下机器上还没有部署Saltstack或Puppet等集群化管理工具. 因为每台server上都使用同样的公钥,故之前都是写一些脚本:把IP 放到一个文件里 ...
- HDU 2544 最短
链接:http://acm.hdu.edu.cn/showproblem.php? pid=2544 解析: 首先数据量为V<=100 那么这里使用不论什么基础的最短路的算法都不会超时! 常见数 ...
- How to decompile class file in Java and Eclipse - Javap command example(转)
Ability to decompile a Java class file is quite helpful for any Java developer who wants to look int ...
- java学习笔记-继承中super关键字
背景: 在java继承的概念中我们得知,被声明为私有的类成员对所属的类来说仍然是私有的.类之外的任何代码都不能访问,包括子类. super关键字的两种用法: 1.用于调用超类的构造函数: 2.用于访问 ...
- Qt学习经验之quit()、exit()、close()《转载》
使用QT编辑界面,其中带来很大方便的一点就是Qt中自带丰富的.种类齐全的类及其功能函数,程序员可以在编辑程序的过程中简单地直接调用.关于窗口关闭的操作,在这里指出常用的三个槽,即quit(),e ...
- javascript中apply和eval结合的强大用法
eval是一个函数,可以接受一个参数,这个参数可以作为js语句被解释性的执行,利用这个特性,eval和apply结合起来,可以大大简化代码 如下例子 <a class="cl ...
- Excel单元格内容太多会覆盖遮住下一单元格范围
Excel单元格内容太多会覆盖遮住下一单元格范围分步阅读 Excel中的单元格内容,有着不同的对齐方式.用户可根据自己的需求,在处理数据的时候,自行设置所需要的对齐方式. 当您在处理数据的时候,如果设 ...
- Trufun云端建模平台之云端UML工具发布
Trufun云端建模平台包括云端UML工具,云端BPMN工具,云端思维导图工具. 云端UML工具是目前最先进的基于HTML5的UML2.x建模工具,所有代码基于JAVA开发,支持类图.用例图.活动图. ...
- spring获取bean 实例
ApplicationContext ctx = new ClassPathXmlApplication("applicationContext.xml"); DataSource ...