4Fang财务软件、四方在线软件、SaaS

简单实用的就是最好的!
帮助中心 | 登录 | 注册 | 关于 |

 
   经典的固定页头页尾CSS

jangogo @ 2009-8-30 11:50:00

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>Fixed header and footer for IE</title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  6. <style type="text/css">    
  7. body{margin:0}/* for ie mac*/   
  8. /* commented backslash hack v2 \*/    
  9. html, body{height:100%;padding:0}    
  10. * html, * html body{   
  11.     overflow:hidden;   
  12.     padding:50px 0;   
  13.     margin:-50px 0;   
  14.     padd\ing:0;   
  15.     ma\rgin:0;   
  16. }   
  17. * html #outer {    
  18.     overflow:auto;   
  19.     height:99.9%;   
  20.     voice-family: "\"}\""; voice-family:inherit;    
  21. }   
  22. * html #contain-all{   
  23.     position:absolute;   
  24.     overflow-y:scroll;   
  25.     width:100%;   
  26.     height:100%;   
  27.     z-index:1;   
  28. }   
  29. /* end hack */    
  30.     
  31. #top-bar{   
  32.     position:absolute;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */   
  33.     top:0px;   
  34.     left:0px;   
  35.     height:50px;   
  36.     width:100%;   
  37.     margin:0;   
  38.     padding:0;   
  39.     z-index:999;   
  40.     overflow:hidden;   
  41. }   
  42. #topbar-inner, #footer-inner {   
  43.     height:50px;   
  44.     background:red;   
  45. }   
  46. /* mac hide - reduce page to allow the scrollbar to remain visible \*/   
  47. * html #topbar-inner,* html #footer-inner {margin-right:17px;}   
  48. /* end hide*/   
  49.     
  50. #footer{   
  51.     position:absolute;   
  52.     bottom:0;   
  53.     width:100%;   
  54.     height:50px;   
  55.     z-index:999;   
  56. }   
  57. .spacer {height:50px}/* same height as footer/header to preserve space*/   
  58. p{margin-top:0}   
  59. html>body #top-bar,html>body #footer{position:fixed}/* for moz/opera and others*/   
  60.     
  61. </style>  
  62. </head>  
  63. <body>  
  64. <div id="outer">    
  65.   <div id="contain-all">    
  66.     <div class="spacer"></div>  
  67.     <p>This is an experimental layout and untested in a real situation but preliminary    
  68.       results look good.</p>  
  69.                         <p>The header and footer need to be a fixed height and are therefore not suited to large amounts of fluid content.</p>  
  70.     <p>The code comments for ie are documented below as they needed to be removed    
  71.       from the code for ie mac</p>  
  72.     <p>* html, * html body{<br />  
  73.       overflow:hidden;/* remove scroll mechanism from body*/<br />  
  74.       padding:50px 0;/* for ie5 and 5.5.*/<br />  
  75.       margin:-50px 0;<br />  
  76.       padd\ing:0;<br />  
  77.       margin:0;<br />  
  78.       }</p>  
  79.     <p>* html #outer { <br />  
  80.       overflow:auto;/* this is basically the root element now*/<br />  
  81.       height:100%;<br />  
  82.       /* we need to make ie5 jump the next style block ( contain-all) so we use    
  83.       the voice hack*/<br />  
  84.       voice-family: "\"}\""; voice-family:inherit; <br />  
  85.       }<br />  
  86.       * html #contain-all{/* must contain all content except for top and bottom    
  87.       bars - ie5 doesnt want this so jumps it as mentioned above*/<br />  
  88.       position:absolute;/* due to a bug in ie6 where children of elements that    
  89.       have overflow  defined behave as those they are fixed*/<br />  
  90.       overflow-y:scroll;<br />  
  91.       width:100%;<br />  
  92.       height:100%;<br />  
  93.       z-index:1;<br />  
  94.       }<br />  
  95.     </p>  
  96.     <p>  </p>  
  97.     <p>some text to wrap : some text to wrap : some text to cause scrolling :    
  98.       : some text to wrap : some text to wrap : some text to cause scrolling :    
  99.       : some text to wrap : some text to wrap : some text to cause scrolling :    
  100.       : some text to wrap : some text to wrap : some text to cause scrolling :    
  101.       : some text to wrap : some text to wrap : some text to cause scrolling :    
  102.       : some text to wrap : some text to wrap : </p>  
  103.     <p>some text to cause scrolling : </p>  
  104.     <p>some text to cause scrolling : </p>  
  105.     <p>some text to cause scrolling : </p>  
  106.     <p>some text to cause scrolling : </p>  
  107.     <p>some text to cause scrolling : </p>  
  108.     <p>some text to cause scrolling : </p>  
  109.     <p>some text to cause scrolling : </p>  
  110.     <p>some text to cause scrolling : </p>  
  111.     <p>some text to cause scrolling : </p>  
  112.     <p>some text to cause scrolling : </p>  
  113.     <p>some text to cause scrolling : </p>  
  114.     <p>some text to cause scrolling : </p>  
  115.     <p>some text to cause scrolling : </p>  
  116.     <p>some text to cause scrolling : </p>  
  117.     <p>some text to cause scrolling : </p>  
  118.     <p>some text to cause scrolling : </p>  
  119.     <p>some text to cause scrolling : </p>  
  120.     <p>some text to cause scrolling : </p>  
  121.     <p>some text to cause scrolling : </p>  
  122.     <p>some text to cause scrolling : </p>  
  123.     <p>some text to cause scrolling : </p>  
  124.     <p>some text to cause scrolling : </p>  
  125.     <p>some text to cause scrolling : </p>  
  126.     <p>some text to cause scrolling : </p>  
  127.     <p>some text to cause scrolling : </p>  
  128.     <p>some text to cause scrolling : </p>  
  129.     <p>some text to cause scrolling : </p>  
  130.     <p>some text to cause scrolling : </p>  
  131.     <p>some text to cause scrolling : </p>  
  132.     <p>some text to cause scrolling : </p>  
  133.     <p>some text to cause scrolling : </p>  
  134.     <p>some text to cause scrolling : </p>  
  135.     <p>some text to cause scrolling : </p>  
  136.     <p>some text to cause scrolling : </p>  
  137.     <p>some text to cause scrolling : </p>  
  138.     <p>some text to cause scrolling : </p>  
  139.     <p>some text to cause scrolling : </p>  
  140.     <p>some text to cause scrolling : </p>  
  141.     <p>some text to cause scrolling : </p>  
  142.     <p>some text to cause scrolling : </p>  
  143.     <p>some text to cause scrolling : </p>  
  144.     <p>some text to cause scrolling : </p>  
  145.     <p>some text to cause scrolling : </p>  
  146.     <p>some text to cause scrolling : </p>  
  147.     <p>some text to cause scrolling : </p>  
  148.     <p>some text to cause scrolling : </p>  
  149.     <p>some text to cause scrolling : </p>  
  150.     <p>some text to cause scrolling : </p>  
  151.     <p>some text to cause scrolling : </p>  
  152.     <p>some text to cause scrolling : </p>  
  153.     <p>some text to cause scrolling : </p>  
  154.     <p>some text to cause scrolling : </p>  
  155.     <p>Last bit of text</p>  
  156.     <div class="spacer"></div>  
  157.   </div>  
  158. </div>  
  159. <div id="top-bar">    
  160.   <div id="topbar-inner">Fixed Top & bottom- Demo works in IE5 IE5.5. and ie6    
  161.     - 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>  
  162. </div>  
  163. <div id="footer">    
  164.   <div id="footer-inner"> Fixed footer </div>  
  165. </div>  
  166. </body>  
  167. </html>  
  168.   
实例效果请看这里 www.4fang.net/article/tech/fix-headfoot.htm