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 ...
随机推荐
- Unicode编码（转）
随着计算机的发展.普及,世界各国为了适应本国的语言和字符都会自己设计一套自己的编码风格,正是由于这种乱,导致存在很多种编码方式,以至于同一个二进制数字可能会被解释成不同的符号.为了解决这种不兼容的问题 ...
- [置顶] RFS的web自动化验收测试——常见问题指引
引言:什么是RFS——RobotFramework+Selenium2library,本系列主要介绍web自动化验收测试方面. ( @齐涛-道长 新浪微博) 下面的内容还没整理好,先发个问题解决机制吧 ...
- HTML文档类型DTD与浏览器怪异模式
虽然在兼容IE6时候经常会注意到两个模式的区别,但是系统的理解起来,还没有认真总结过.看了一些网上的资料.结合自己的理解汇总了一下,放在这里备忘并分享给大家. 浏览器从服务端获取网页后会根据文档的DO ...
- 我是小白之<%%>用法
下面知识都是摘录自网络 <%= %>输出,等价于Response.Write()<%%> 写代码<%-- --%>注释. <% %>跟其它serv ...
- windows lwp 乱码问题
use LWP::UserAgent; use Encode; my $ua = LWP::UserAgent->new; $phone=$ARGV[0]; $cc=$ARGV[1]; $ua- ...
- python获取实时股票信息
Python3获取股票行情数据(中国个股/中国指数/全球指数) #!/usr/local/bin/python3 #coding=utf-8 #source http://www.cnblogs.co ...
- readline-6.3 之arm平台交叉编译
近期须要弄个CLI命令接口程序,初步设想是须要支持历史命令翻阅,tab键命令补全这种一个东西.经查阅相关文档,深耕百度一番!(google近期不太正常) 实在恼火.发现readline果真是个好东西, ...
- select的种种取值
今天别人问我一个问题 <body> <select id="tests" onchange="test()"> <option & ...
- hadoop拷贝文件时 org.apache.hadoop.ipc.RemoteException异常的解决
1.系统或hdfs是否有空间 2.datanode数是否正常 3.是否在safemode 4.防火墙关闭 5.配置方面 6.把NameNode的tmp文件清空,然后重新格式化NameNode
- Linear Regression(线性回归)（二）—正规方程（normal equations）
(整理自AndrewNG的课件,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 在上篇博客中,我们提出了线性回归的概念,给出了一种使代价函数最小的 ...