代码片段 → CSS → 固定页脚

固定页脚

Avatar of Chris Coyier
Chris Coyier 于 
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
嘘！ 创建一个 DigitalOcean 账户并获得 200美元免费信用额度 用于基于云的托管和服务。

评论

  1. FJ
    评论永久链接#

    您可以在此处找到预览：http://www.flashjunior.ch/school/footers/fixed.cfm

    回复
  2. Kevin
    评论永久链接#

    您似乎忘记了 id 标识符 (#)。

    footer {
    ...
    }

    应该是

    #footer {
    ...
    }

    – Kevin

    回复
    • Chris Coyier
      评论永久链接#

      已修复。

    • BJ
      评论永久链接#

      除非它适用于 html 5（不带 #），对吧？

    • Giorgi Gvimradze
      评论永久链接#

      它是 HTML 5 中的一个新标签，所以它可以是 footer{} 而不是 #footer :3

    • To-mos
      评论永久链接#

      您错了，实际上在 HTML5 中，如果您调用的是<footer> 元素而不是<div id="footer"> 元素，则“footer”是完全有效的。

  3. TNk
    评论永久链接#

    对于 IE6，http://www.ea.com 中使用了另一种表达式代码。

    要防止 #footer 有边框时出现无限滚动，请使用相同宽度（边框宽度）的负边距。

    *html #footer {
	margin-top: -2px; /* prevents infinite scroll if #footer have a border of 2px*/
	position: absolute;
	top: expression(documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight));
}
    回复
  4. Jojo
    评论永久链接#

    不幸的是，它无法验证。

    回复
  5. Falkon
    评论永久链接#

    嗨，Chris，
    恕我直言，我最近才开始了解这个想法，并且也开始参与网页设计。您能否解释一下，我是否需要在 html 站点中执行任何操作才能实现这一点，或者只是在 css 页面中更改页脚信息？

    感谢您的帮助。

    非常感谢您提前提供帮助。
    （我正在使用 DW CS4）

    期待您的回复，

    Falkon

    回复
    • Laurel Pehrson
      评论永久链接#

      只需将此内容放在 html 的 body 中
      您的文字 :D

      将 CSS 放入 header 中的标签中或将其放在外部样式表中。

      Molly E. Holyschlag 的《Spring into HTML and CSS》是初学者的优秀书籍。

  6. Falkon
    评论永久链接#

    嗨，大家好，我尝试了这段代码，现在我的页脚完全消失了……我做错了什么？请帮忙。

    提前感谢。

    回复
  7. Falkon
    评论永久链接#

    它适用于其他模板，但此模板不行，我失去了整个页脚。

    回复
  8. gnightly
    评论永久链接#

    嗨，这在 Chrome/Firefox 上运行完美，但在 Safari 上不行——你知道为什么以及如何解决这个问题吗？

    谢谢！

    回复
  9. Nathan Smith
    评论永久链接#

    嘿，兄弟，你的东西很棒……我有一个关于固定页脚的问题。我的一个客户想要实现这个功能，但我希望它在 y 轴上的某个点停止，如果浏览器高度较小。您遇到过解决此问题的最佳方法是什么？

    回复
    • doko
      评论永久链接#

      您的问题来自 2011 年，但无论如何：使用 CSS 媒体查询在这些情况下以不同的方式设置页脚位置样式。使用 max-height 因素。

  10. Sumcara
    评论永久链接#

    嗨，在哪里可以找到讨论的代码？

    回复
  11. Vyse69
    评论永久链接#

    用于所有浏览器的居中固定页脚
    （Pour un pied de page centré et fixe avec tous les navigateurs）

    IE / Firefox / Chrome / Safari / 等……

    #footer {
    bottom:0px;
    height:30;
    right:0%;
    left:0%;
    position:fixed!important;
    position:absolute;
    width=100%;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop))+’px’);
    text-align:center;
    visibility:visible;
    }

    回复
  12. Vyse69
    评论永久链接#

    哦，不……它不完整！

    回复
  13. Vyse69
    评论永久链接#

    那是……

    #footer {
bottom:0px;
height:30;
right:0%;
left:0%;
position:fixed!important;
position:absolute;
width=100%;
top:expression((0-(footer.offsetHeight)+
(document.documentElement.clientHeight?
document.documentElement.clientHeight:
document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?
document.documentElement.scrollTop:document.
body.scrollTop))+'px');
text-align:center;
visibility:visible;
}
    回复
  14. nuno
    评论永久链接#

    非常感谢……在经历了这么多天的麻烦后，这是我找到的最好的方法！
    运行完美。继续加油

    回复
  15. Nitasha
    评论永久链接#

    谢谢大家
    请添加

    html, body { height:100%;}

    用于**Firefox、Opera 和 Chrome**浏览器。

    回复
  16. Ash
    评论永久链接#

    谢谢大家..干得好……
    但正如我所看到的演示，它实际上并没有粘到底部..总是距离底部 10px 的边距..“这是我在滚动页面后”
    ..
    仍然很棒 : )

    回复
  17. Ash
    评论永久链接#

    抱歉..我指的是粘性页脚..错误的主题……

    Ash

    回复
  18. caizinho
    评论永久链接#

    那么 Css Ipad 呢？

    回复
  19. Ab
    评论永久链接#

    嗨..我有一段如下所示的代码，我正在尝试在 Word 中插入页脚

    我的页脚

    但不幸的是，这不起作用..它将我的页脚视为 body 本身的一部分，并且当生成 Word 并如果数据过多时，在打印版式中，页脚会转到下一页，并且还在顶部而不是页面末尾..
    你能帮我解决这个问题吗..我需要在每个 Word 页面底部显示固定页脚，即使数据量很大..

    回复
  20. SA
    评论永久链接#

    我们如何在 Windows Mobile 上实现此功能？

    回复
  21. vega
    评论永久链接#

    我已经使用了以下方法..但无论如何页脚都没有固定……

    html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 72px;}  /* must be same height as the footer */

#footer {
	position:fixed; z-index:999;
	width:100%;
    bottom:-20px;
	margin-top: -72px; /* negative value of footer height */
	margin-top: 0px !ie; /* for IE */
	height: 92px;
	clear:both; text-align:center;
	background:url(../bg.png) repeat-x #115c9c;
	} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
    回复
    • vega
      评论永久链接#

      在包括 IE 在内的所有浏览器中，页脚都已固定..但在 Windows Mobile 中它不起作用
      .

  22. Paul Sossa
    评论永久链接#

    Bryant 的代码运行起来非常棒，不用再找了，非常感谢！

    回复
  23. Ning Sukham
    评论永久链接#

    嗨！我正在寻找类似的东西，但我更希望它在垂直居中的左侧或右侧浮动。
    例如
    如果您查看 http://www.css3.com/css-float/
    在右侧，他们在上面的 url 上有一个名为“反馈”的红色按钮
    我需要类似的东西，带有一点阴影，使其看起来更好。
    您是否有显示此类内容的示例？
    请帮忙！谢谢 : )

    此致，
    Ning。
    附言：顺便说一句，这是一个非常好的教程，我把它存储在我的书中，以备我需要粘性/浮动页脚时使用。

    回复
  24. Oscar
    评论永久链接#

    非常感谢！我很难弄清楚这一点 :D

    回复
  25. Praveen Puglia
    评论永久链接#

    为什么在声明为 position:fixed 后，我们必须将 div 元素的宽度设置为 100%？这会使其成为内联元素吗？

    回复
    • Chris Coyier
      评论永久链接#

      不是内联，也不是 100% 宽。只是那些奇怪的事情之一。

  26. Ty Chanravy
    评论永久链接#

    我想知道当我将我的内容分配给自动时，我的页脚会怎样..用于显示数据

    回复
  27. Sharma

    评论永久链接#

    运行良好

    回复
  28. Paul
    评论永久链接#

    这可以正常工作，但对我来说不是很有用，我永远不想让页脚的 position: fixed，因为内容越多，页脚就总是可见的，在我看来这看起来很糟糕。

    如果你想要这种效果，它仍然很有用。

    回复
  29. Arian Tashakkor
    评论永久链接#

    嗨！
    我在使用固定页脚时遇到问题！当我使用固定页脚时，内容会跑到页脚下面，但当我使用粘性页脚时，问题就解决了！

    那么固定页脚有什么用呢？（固定页脚只是帮助我们将页脚保持在页面底部，但我上面提到的问题！），所以固定页脚有什么用呢？

    我搜索了大量的粘性页脚，但我不知道哪个是最好的（例如，与大多数浏览器兼容等等）？

    此致
    Arian Tashakkor

    回复
  30. vikas Pathak
    评论永久链接#

    以下 CSS 代码有什么区别

    footer
    {
    background:brown;
    }
    .footer
    {
    background:brown;
    }

    回复
    • Shawn
      评论永久链接#

      第一个会将目标设置为所有标签名为 footer() 的元素，而第二个会将目标设置为所有类名为 footer() 的元素。

      <

      div class=”footer”>).

  31. Daniel F
    评论永久链接#

    非常感谢你们。

    alert(“安全问题”)
    只有一件事。

    我怎样才能确保其他 html 元素不会跑到页脚后面。这很烦人，并且会使它们无法阅读。

    查看 jsfiddle 这里

    谢谢，
    Daniel F

    回复
    • Daniel F
      评论永久链接#

      抱歉关于脚本，它没有显示在预览中，我想知道会发生什么

  32. Bhanu kumar
    评论永久链接#

    页脚可以用 php 创建吗？我的意思是，哪一个更好？

    回复
  33. joe
    评论永久链接#

    谢谢！我一直在到处寻找这个！

    回复
  34. James
    评论永久链接#

    这非常有用！谢谢老兄！

    回复
  35. Sylvia Rangel
    评论永久链接#

    我只能说，天哪，谢谢！！我尝试了网上所有页脚代码几个小时。然后我点击了你简单的代码，它完美地工作了！

    回复
  36. Mohammad
    评论永久链接#

    非常感谢，但我更改宽度时遇到问题，页脚停留在页面的左角。我该如何解决这个问题，因为我希望我的页脚为 75% 而不是 100%。

    回复
  37. Amarnath Reddy
    评论永久链接#

    谢谢

    回复
  38. Manoj mor
    评论永久链接#

    我在手机上的 Opera Mini 浏览器中遇到问题，页脚没有固定在底部

    回复
  39. da]v[ax
    评论永久链接#

    大家好，参考链接已失效 :( 这是 CodePen 中的代码

    http://codepen.io/anon/pen/qNEayp

    干杯，非常感谢您精彩的网站！

    回复

发表评论

您的电子邮件地址不会被公开。 必填字段标有 *

© 2024 . All rights reserved.