经典的固定页头页尾CSS
(创建时间:2009年08月30日 19:50:00)
Jangogo :
![动态更新](/images/saveMsg_0.gif)
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Fixed header and footer for IE</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <style type="text/css">
- body{margin:0}/* for ie mac*/
- /* commented backslash hack v2 \*/
- html, body{height:100%;padding:0}
- * html, * html body{
- overflow:hidden;
- padding:50px 0;
- margin:-50px 0;
- padd\ing:0;
- ma\rgin:0;
- }
- * html #outer {
- overflow:auto;
- height:99.9%;
- voice-family: "\"}\""; voice-family:inherit;
- }
- * html #contain-all{
- position:absolute;
- overflow-y:scroll;
- width:100%;
- height:100%;
- z-index:1;
- }
- /* end hack */
- #top-bar{
- position:absolute;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
- top:0px;
- left:0px;
- height:50px;
- width:100%;
- margin:0;
- padding:0;
- z-index:999;
- overflow:hidden;
- }
- #topbar-inner, #footer-inner {
- height:50px;
- background:red;
- }
- /* mac hide - reduce page to allow the scrollbar to remain visible \*/
- * html #topbar-inner,* html #footer-inner {margin-right:17px;}
- /* end hide*/
- #footer{
- position:absolute;
- bottom:0;
- width:100%;
- height:50px;
- z-index:999;
- }
- .spacer {height:50px}/* same height as footer/header to preserve space*/
- p{margin-top:0}
- html>body #top-bar,html>body #footer{position:fixed}/* for moz/opera and others*/
- </style>
- </head>
- <body>
- <div id="outer">
- <div id="contain-all">
- <div class="spacer"></div>
- <p>This 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 class="spacer"></div>
- </div>
- </div>
- <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>
文档中心