【问题标题】:Trying to get a Sticky Footer working试图让粘性页脚工作
【发布时间】:2012-07-28 11:58:28
【问题描述】:

我无法让粘性页脚正常工作。本质上,我希望它完全符合这个演示的功能

http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

我已经尝试了大约十几个教程,试图让它发挥作用,但我就是做不到。有人可以帮我吗?这是我的网站(运行 Wordpress 3.4.1)

http://hgsupport.x10.mx/support/

谢谢

【问题讨论】:

  • 这些解决方案中的任何一个对您有用吗?如果是,你能接受正确答案吗?

标签: php wordpress footer sticky


【解决方案1】:

你的 CSS 中可能有类似的东西吗?

#footer
{position: fixed; bottom: 0;}

【讨论】:

    【解决方案2】:

    在您链接的示例中使用 Chrome Inspector(它向您显示 DOM 树、应用于元素的 CSS 规则,为您提供真正的 JS 控制台以及更多工具和信息),我看到他将以下 CSS 应用于他的页脚 div:

    #footer{
        position: absolute; /* Allows you to position the element anywhere
                               you want without affecting other elements */
        bottom: 0;  /* Distance from bottom of element to bottom of page set to 0 */
        height: 60px; /* Footer is 60 pixels high, not too important */
        width: 100%;  /* width of footer is all the width of the parent element, which
                        is all available space here. */
    }
    

    如果您希望页脚留在屏幕的底部,而不是页面,您必须在上面的代码中将position: absolute替换为position: fixed

    查看源代码(在大多数浏览器中为 Ctrl-U)并查看 CSS 也可以。

    【讨论】:

      【解决方案3】:
      position: fixed;
      bottom: 0;
      

      这就是相关的 CSS。你可以在http://jsfiddle.net/ZZYPK/看到一个例子

      编辑:带有大量示例文本以显示它位于页面底部的示例:http://jsfiddle.net/ZZYPK/1/

      【讨论】:

      • 不是我想要的。如果您添加内容并调整窗口大小,它会与内容重叠。在我的示例中,页脚在到达内容时停止
      【解决方案4】:

      尝试查看此设置是否符合您的需求:http://jsfiddle.net/yceaS/

      关键部分是有一个包装器div 与您的内容和您的页脚在单独的div 中,然后使用CSS 规则来修复定位

      【讨论】:

      • 这不起作用;我刚试过。我有一个页脚,一个用于页脚的包装器,然后在最底部有另一个带有自己包装器的页脚(这是我可以让页脚保持 100% 的唯一方法,同时保持页脚的垂直边距)。我也没有 HTML 文件,所以我将 HTML 代码添加到 page.php 文件中(不知道是否正确)。我在我的代码中留下了我所做的事情
      【解决方案5】:

      我遇到了和你一样的问题,这就是为我解决的问题!

      这是 CSS:

      html{
         height: 100%;
      }
      body{
         height: 100%;
      }
      .wrapper {
         min-height: 100%;
         height: auto !important;
         height: 100%;
         margin: 0 auto -100px auto;
         /*The -100px mentioned above needs to be the exact height of the footer.*/
      }
      .footer{
         height: 100px;
         clear: both;
         position: relative;
      }
      .nudge{
         height: 100px;
         clear: both;
      }
      

      HTML 格式如下:

      <html>
        <body>
          <div class="wrapper">
            Your main content goes in here
            <div class="nudge"></div>
            <!--The nudge div should remain empty and makes space for the negative margin assigned above.-->
          </div><!--END class="wrapper" -->
          <footer>
            Your footer content goes in here
          </footer>
        </body>
      </html>
      

      网络上的所有其他解决方案和其他答案都缺少微调。

      来源:http://www.davidjrush.com/blog/2009/01/css-sticky-footer/

      【讨论】:

        猜你喜欢
        • 2015-02-15
        • 1970-01-01
        • 1970-01-01
        • 2016-06-21
        • 2013-07-01
        • 2012-01-16
        • 2013-02-23
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多