强制页脚到页面底部

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了强制页脚到页面底部相关的知识，希望对你有一定的参考价值。

  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></title>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.   <style type="text/css">
  7. /* commented backslash hack v2 */ 
  8. html, body{height:100%;} 
  9. /* end hack */ 
  10. *{margin:0;padding:0}
  11. body {
  12.  padding:0;
  13.  margin:0;
  14.  background:pink;
  15.  color: #000000;
  16. }
  17. #outer{
  18.  min-height:100%;
  19.  background:#F8E7EC;
  20.  margin-bottom:-52px;
  21.  color: #000000;
  22. }
  23.  
  24. * html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/
  25. #footer {
  26.  width:100%;
  27.  clear:both;
  28.  height:50px;
  29.  border-top:1px solid #000;
  30.  border-bottom:1px solid #000;
  31.  background-color: #FF8080;
  32.  color: #000000;
  33.  text-align:center;
  34.  position:relative;
  35. }
  36. * html #footer {/*only ie gets this style*/
  37.  height:52px;/* for ie5 */
  38.  height:50px;/* for ie6 */
  39. }
  40. html > body  #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */
  41.   </style>
  42.  </head>
  43.  <body>
  44.   <div id="minHeight"></div>
  45.   <div id="outer">
  46.    <p>This is some content : This is some content : This is some content : This
  47.     is some content : This is some content : This is some content : This is some
  48.     content : This is some content : This is some content : This is some content
  49.     : This is some content : This is some content : This is some content : This
  50.     is some content : This is some content : This is some content : This is some
  51.     content : This is some content : This is some content : This is some content
  52.     : This is some content : This is some content : This is some content : This
  53.     is some content : This is some content : This is some content : This is some
  54.     content : This is some content : This is some content : This is some content
  55.     : This is some content :
  56.    </p>
  57.    <div id="clearfooter"></div>
  58.   <!-- to clear footer -->
  59.   </div>
  60. <!-- end outer div -->
  61.   <div id="footer">Footer - | | - Footer </div>
  62.  </body>
  63. </html>

以上是关于强制页脚到页面底部的主要内容，如果未能解决你的问题，请参考以下文章

强制页脚到页面底部

css 强制页脚到页面底部（使用Beaver Themer时）

Bootstrap 3 与 Flush 页脚到页面底部

如何强制我的页脚粘在 CSS 中任何页面的底部？

如何在具有网格布局的空/整页上强制页脚位于页面底部

即使内容不够大，也将页脚强制放在屏幕底部（不粘）