将页脚保持在页面底部(如果需要,可以滚动)

保罗

我试图在页面底部显示页脚。如果页面长于1个屏幕,我希望页脚仅在滚动到底部后才显示。因此,我不能使用“ position:fixed”,因为这样它将始终显示。

我正在尝试复制以下示例:http : //peterned.home.xs4all.nl/examples/csslayout1.html

但是,当我使用以下内容时,由于某种原因,页脚显示的是我的长页面的一半。

position: absolute; bottom:0 

我既有短页也有长页,我希望它都位于两者的底部。

如何将页脚放在长页面的底部?

小提琴

我创建了这些小提琴来显示问题并测试代码。请在您的解决方案中发布一个有效的示例。

我的页脚CSS:

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

.content {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

/* --- Footer --- */
.footerbar {                                position: absolute;
                                            width: 100%;
                                            bottom: 0;

                                            color: white;
                                            background-color: #202020;
                                            font-size: 12px; }

a.nav-footer:link,
a.nav-footer:visited {                      color: white !important; }
a.nav-footer:hover, 
a.nav-footer:focus {                        color: black !important;
                                            background-color: #E7E7E7 !important; }
scmccarthy22

我建议使用“粘性页脚”方法。请参阅以下链接:

http://css-tricks.com/snippets/css/sticky-footer/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

如何将页脚保持在屏幕底部

来自分类Dev

有什么方法可以使用CSS将滚动条始终保持在底部吗?

来自分类Dev

无法将页脚放在页面底部

来自分类Dev

始终将滚动条保持在底部

来自分类Dev

将Foundation页脚置于页面底部

来自分类Dev

如果不需要滚动,是否可以将RecyclerView中的最后一项停靠在底部?

来自分类Dev

我需要保持页面滚动到底部,直到用户向后滚动

来自分类Dev

将页脚推到页面底部

来自分类Dev

滚动滚动到底部,但内容保持在顶部

来自分类Dev

将页脚推到页面底部(引导程序)

来自分类Dev

调整Bootstrap大小时如何将页脚保持在页面底部

来自分类Dev

如何将页脚放在页面底部?

来自分类Dev

如何将页脚推到页面底部

来自分类Dev

如何将页脚放在页面底部

来自分类Dev

将页脚强制到页面底部

来自分类Dev

如何将页脚移到页面底部?

来自分类Dev

在加载时将div保持在屏幕底部,但在向下滚动时保持在原始位置

来自分类Dev

我需要保持页面滚动到底部,直到用户向后滚动

来自分类Dev

即使减小浏览器的宽度,如何将页脚保持在屏幕底部?

来自分类Dev

如何使用jQuery将页脚保持在屏幕底部

来自分类Dev

无法将滚动条保持在底部

来自分类Dev

将页脚放在页面底部

来自分类Dev

如何使用JavaScript使Footer保持在页面底部

来自分类Dev

如何在不受位置影响的情况下将页脚保持在底部:绝对元素

来自分类Dev

Bootstrap/CSS - 即使没有足够的内容也将页脚保持在底部

来自分类Dev

Angular 4,如何使用动态页面内容将页脚保持在底部

来自分类Dev

将表页脚固定到页面底部,同时保持列的大小正确

来自分类Dev

如何让我的页脚在 CSS 中保持在页面底部而不重叠

来自分类Dev

将页脚保持在页面底部(但当它不隐藏元素时)

Related 相关文章

  1. 1

    如何将页脚保持在屏幕底部

  2. 2

    有什么方法可以使用CSS将滚动条始终保持在底部吗?

  3. 3

    无法将页脚放在页面底部

  4. 4

    始终将滚动条保持在底部

  5. 5

    将Foundation页脚置于页面底部

  6. 6

    如果不需要滚动,是否可以将RecyclerView中的最后一项停靠在底部?

  7. 7

    我需要保持页面滚动到底部,直到用户向后滚动

  8. 8

    将页脚推到页面底部

  9. 9

    滚动滚动到底部,但内容保持在顶部

  10. 10

    将页脚推到页面底部(引导程序)

  11. 11

    调整Bootstrap大小时如何将页脚保持在页面底部

  12. 12

    如何将页脚放在页面底部?

  13. 13

    如何将页脚推到页面底部

  14. 14

    如何将页脚放在页面底部

  15. 15

    将页脚强制到页面底部

  16. 16

    如何将页脚移到页面底部?

  17. 17

    在加载时将div保持在屏幕底部,但在向下滚动时保持在原始位置

  18. 18

    我需要保持页面滚动到底部,直到用户向后滚动

  19. 19

    即使减小浏览器的宽度,如何将页脚保持在屏幕底部?

  20. 20

    如何使用jQuery将页脚保持在屏幕底部

  21. 21

    无法将滚动条保持在底部

  22. 22

    将页脚放在页面底部

  23. 23

    如何使用JavaScript使Footer保持在页面底部

  24. 24

    如何在不受位置影响的情况下将页脚保持在底部:绝对元素

  25. 25

    Bootstrap/CSS - 即使没有足够的内容也将页脚保持在底部

  26. 26

    Angular 4,如何使用动态页面内容将页脚保持在底部

  27. 27

    将表页脚固定到页面底部,同时保持列的大小正确

  28. 28

    如何让我的页脚在 CSS 中保持在页面底部而不重叠

  29. 29

    将页脚保持在页面底部(但当它不隐藏元素时)

热门标签

归档