【问题标题】:Footer bottom of the screen屏幕底部的页脚
【发布时间】:2013-04-29 06:26:45
【问题描述】:

我发现了很多关于这个主题的文章,但没有一篇文章对我有用,我想在内容不够大时在屏幕底部制作一个页脚,但当内容长于我的页脚停留在内容下方且不会停留在屏幕底部的屏幕。

提前致谢!

【问题讨论】:

    标签: html css position footer


    【解决方案1】:

    编辑:试试CSS Sticky Footer:很好,而且只有 CSS。

    如果你想尝试,absolute CSS 位置属性也可以工作。结帐MDN docs:

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

    【讨论】:

    • 我只希望它在页面底部而不是在屏幕底部,所以当内容小时它在屏幕底部,但是当内容大时你需要向下滚动才能看到页脚。
    • 现在我不明白,我建议尝试调整 CSS Sticky Footer 以满足您的需求。
    【解决方案2】:

    实际上,仅使用 CSS 就很容易做到这一点,尽管有一些小限制。这是一个如何完成的演示(查看源代码以获取代码):

    http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm

    以下是它的工作原理的详细说明,以备不时之需:

    http://www.sitepoint.com/forums/showthread.php?171943-CSS-FAQ-Tips-etc-Please-read-before-posting!&p=1239966#post1239966

    【讨论】:

    • 内容大的时候在底部,内容小的时候就出来了:(
    • 怎么样?只需打开提供的演示,页脚就停留在底部,尽管内容甚至不需要半个屏幕。
    • 确实如此。您需要非常仔细地遵循示例代码。如果你不这样做,它会搞砸的。
    【解决方案3】:

    这只是另一个示例,在所有浏览器 AFAIK 中都能正常工作。 http://peterned.home.xs4all.nl/examples/csslayout1.html

    编辑:我不是作者,只是前段时间自己找过类似的东西。

    【讨论】:

    【解决方案4】:

    -- 用 javascript 来做

    --例子

    <div class='content'>
      your page
    </div>
    <div class='Footer'>Footer</div>
    
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
     var document_height = $(document).height();
     var content_height = $('.content').height();
    
     if (content_height < document_height) {
        $('.content').css('height', (document_height));
     }
    </script>
    

    【讨论】:

      猜你喜欢
      • 2013-08-19
      • 1970-01-01
      • 1970-01-01
      • 2015-08-30
      • 2011-11-24
      • 2017-06-10
      • 1970-01-01
      • 1970-01-01
      • 2016-01-18
      相关资源
      最近更新 更多