全宽页眉~固定宽度的内容，带粘性页脚

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全宽页眉~固定宽度的内容，带粘性页脚相关的知识，希望对你有一定的参考价值。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title>Full Width Header ~ Fixed Width Content</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <style type="text/css">
  8. /*------ Resets -----*/
  9. body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
  10.     margin:0;
  11.     padding:0;
  12. }
  13. body {
  14.     background-color: #ccc;
  15. }
  16. html, body {
  17.     height: 100%; /* for sticky footer */ 
  18.     position:absolute;/* Opera height trigger*/
  19.     width:100%;
  20. }
  21. #header {
  22.     height: 115px;
  23.     width:100%;
  24.     min-width:962px;
  25.     margin-bottom:-115px;
  26.     background-color: #777;
  27.     position:relative;
  28. }
  29. * html #header {
  30.     width: 100%; /* Fallback width if javascript is off */
  31.     width: expression(  
  32.     (document.documentElement.clientWidth < 964) ? "962px" : "auto");
  33. }
  34. #wrapper {
  35.     min-height:100%; /* for sticky footer */
  36.     width: 960px;
  37.     background: white;
  38.     margin:0 auto;
  39.     border-left:2px solid #777; /*border width added to header and footer widths*/
  40.     border-right:2px solid #777; /*border width added to header and footer widths*/
  41. }
  42. * html #wrapper {height:100%;} /*for ie6, same as min-height*/
  43.  
  44. #clearheader{height:115px; background:#ccc} /*clear header without margins or padding*/
  45.  
  46. #navbar {
  47.     float:left;
  48.     height: 50px;
  49.     width: 765px;
  50.     background-color:#A6A6A6;
  51. }
  52. #sidebar {
  53.     float: right;
  54.     width: 195px;
  55.     background-color: #A6A6A6;
  56. }
  57. #content {
  58.     background-color: #fff;
  59.     width: 735px;
  60.     float: left;
  61. }
  62. #clearfooter{clear:both; height:50px;} /*For a sticky footer*/
  63. #footer {
  64.     width: 962px;
  65.     background-color: #777;
  66.     height:50px;
  67.     margin:-50px auto 0 auto; /*pull footer back into viewport and center*/
  68. }
  69. h1,h2,h3,h4,h5 {padding-top:10px; text-align:center;}
  70. #navbar h4 {line-height:1.5em; padding:10px; text-align:left}
  71. #content h2 {text-align:left; padding: 10px;}
  72. #footer h4 {line-height:1.25em;}
  73. p {margin:10px;}
  74.  
  75. </style>
  76.  
  77. </head>
  78. <body>
  79.  
  80. <div id="header">
  81.     <h2>Full Width Header ~ Fixed Width Content</h2>
  82.     <h3>With a Sticky Footer</h3>
  83. </div><!-- end #header -->
  84.  
  85. <div id="wrapper">
  86.     <div id="clearheader"></div>
  87.         <div id="sidebar">
  88.             <h4>Sidebar</h4>
  89.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  90.             Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
  91.             lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
  92.             adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
  93.             sociis natoque penatibus et magnis dis parturient montes, nascetur
  94.             ridiculus mus.</p>
  95.         </div><!-- end #sidebar -->
  96.         <div id="navbar">
  97.             <h4>Navigation</h4>
  98.         </div><!-- end #navbar -->
  99.         <div id="content">
  100.             <h2>Page Title</h2>
  101.  
  102.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  103.             Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
  104.             lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
  105.             adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
  106.             sociis natoque penatibus et magnis dis parturient montes, nascetur
  107.             ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
  108.             consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
  109.             natoque penatibus et magnis dis parturient montes, nascetur ridiculus
  110.             mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
  111.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  112.             Mauris vel magna.</p>
  113.  
  114.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  115.             Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
  116.             lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
  117.             adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
  118.             sociis natoque penatibus et magnis dis parturient montes, nascetur
  119.             ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
  120.             consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
  121.             natoque penatibus et magnis dis parturient montes, nascetur ridiculus
  122.             mus. Donec semper ipsum et urna.</p>
  123.  
  124.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  125.             Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
  126.             lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
  127.             adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
  128.             sociis natoque penatibus et magnis dis parturient montes, nascetur
  129.             ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
  130.             consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
  131.             natoque penatibus et magnis dis parturient montes, nascetur ridiculus
  132.             mus. Donec semper ipsum et urna.</p>
  133.  
  134.         </div><!-- end content -->
  135.     <div id="clearfooter"></div>
  136. </div> <!-- end wrapper -->
  137. <div id="footer"><h4>Footer</h4></div>
  138. </body>
  139. </html>

以上是关于全宽页眉~固定宽度的内容，带粘性页脚的主要内容，如果未能解决你的问题，请参考以下文章

具有固定页眉的真正粘性页脚？

带有侧导航和内容区域的 CSS3/HTML5 粘性页眉/页脚

需要粘性页眉/页脚，但 CMS 不会让我在正文标签中编码

流体全高列，粘性页脚

CSS 粘性页脚，宽度为 100%

粘性页脚问题