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 ...
随机推荐
- Android SurfaceView实现静态于动态画图效果
本文是基于Android的SurfaceView的动态画图效果,实现静态和动态下的正弦波画图,可作为自己做图的简单参考,废话不多说,先上图, 静态效果: 动态效果: 比较简单,代码注释的也比较详细,易 ...
- Eclipse用法和技巧十三：自动生成的TODO注释1
使用eclipse的快捷键自动生成的代码,经常有这样的注释. 一眼看上去这个注释和一般的注释并无什么差别,不过TODO这个字符串的颜色不一样,应该有些内容.TODO是eclipse中提供的一种任务标签 ...
- tq2440+fedora安装qt4.5
1. make[1]: arm-none-linux-gnueabi-g++:命令未找到 make[1]: *** [.obj/release-shared-emb-arm/qatomic_arm.o ...
- Linux下编译Qt源码，一定要下载tar.gz版本，否则会报权限不足
首先下载qt-everywhere-opensource-src-4.8.1源码,下载地址: ftp://ftp.qt-project.org/qt/source/ 在Linux下编译一定要下载qt- ...
- A - Alignment of Code(推荐)
You are working in a team that writes Incredibly Customizable Programming Codewriter (ICPC) which is ...
- MFC如何生成一个可串行化的类
一.MFC允许对象在程序运行的整个过程中持久化的串行化机制 (1)串行化是指向持久化存储媒介(如一个磁盘文件)读或写对象的过程. (2)串行化用于在程序运行过程时或之后修复结构化数据(如C++类或结构 ...
- 如何在SAS中重新构建限价指令簿（Limit Order Book）：使用HashTable
在之前的一篇日志里(http://blog.csdn.net/u010501526/article/details/8875446),我将重新构建LOB(Limit Order Book)分为了三步 ...
- [置顶] Java字节码文件剖析
Java为什么能够支持跨平台,其实关键就是在于其*.class字节码文件,因为*.class字节码文件有一个统一标准的规范,里面是JVM运行的时需要的相关指令,各家的JVM必须能够解释编译执行标准字节 ...
- 《转》OpenStack Live Migration
This post is based assumption that KVM as hypervisor, and Openstack is running in Grizzly on top of ...
- Swift - 类型判断is 与 类型转换as
在Swift中,通常使用is和as操作符来实现类型检查和转换.下面通过样例来演示使用方法,首先定义几个类. 1 2 3 4 5 6 7 8 9 10 11 //基类,人类 class Human{ } ...