DIV固定在页面某个位置，不随鼠标滚动而滚动
来源：互联网 发布：幽默高质量的笑话 知乎 编辑：程序博客网 时间：2024/05/02 00:59
<!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>
