页脚不停留在页面底部

Question

I have a web page on which I use the "Supersized" jquery plugin for changing backgrounds. 我有一个网页，在该网页上我使用“超大” jQuery插件来更改背景。 I also have a footer which only shows if I put the following CSS for it: 我还有一个页脚，仅当我放置以下CSS时才会显示该页脚：

#footer{
    width: 100%;
    color: #ffffff;
    background: #000000;
    position: fixed;
    bottom: 0px;
    height: 40px;
    padding: 5px 0px 5px 0px;
}

However, when something happens which changes the window height, the content of the page goes behind the footer, and when I scroll down, the footer doesn't stay at the bottom of the page - it scrolls up. 但是，当发生某些改变窗口高度的操作时，页面的内容将移至页脚后面，而当我向下滚动时，页脚不会停留在页面底部，而是向上滚动。

For example, I have three divs which are shown side-by-side, but when the window resizes under 900px of width, the divs are shown one under the other, and so the window height changes. 例如，我有3个div并排显示，但是当窗口调整为小于900px的宽度时，div则显示为一个在另一个下方，因此窗口高度会发生变化。 That's when the divs go behind the footer, and it scrolls up along with them. 那时div跳到页脚后面，并且与它们一起向上滚动。

I have tried position: relative and position: static , but then it doesn't even show, even with high values of z-index. 我尝试过position: relative和position: static ，但是即使z-index值很高，它也不会显示。 I think this "not-showing" is because of the plugin I use for background images. 我认为此“未显示”是因为我使用了背景图片插件。 I have also tried some jquery functions when window changes height, but no results there either. 当窗口更改高度时，我也尝试了一些jquery函数，但是那里也没有结果。 Any ideas? 有任何想法吗？ Thank you in advance... 先感谢您...

Answer 1

Here is example: 这是示例：

 html { height: 100%; } body { position: relative; min-height: 100%; } main { padding-bottom: 30px; } footer { position: absolute; bottom: 0; width: 100%; height: 30px; }

 <body> <header> header </header> <main> main </main> <footer> footer </footer> </body>

Answer 2

If your goal is keep your footer at the bottom of your "page content" AND visible, then I would advise you to assign height:100% your html tag and your body tag in your CSS. 如果您的目标是使页脚位于“页面内容”的底部并可见，那么我建议您在CSS中分配height:100%的html标记和body标记。 On the other hand if you want the footer to stay at the bottom of the "Browser Window/Viewport" then you will want to look up the "Making a footer stay put with CSS" by "JONATHAN LONGNECKER" . 另一方面，如果您希望页脚停留在“浏览器窗口/视口”的底部，则需要查找“ JONATHAN LONGNECKER”的“使用CSS放置页脚” 。 Hope I have helped! 希望我有所帮助！ Athena 雅典娜
@athenacreations.org @ athenacreations.org

页脚不停留在页面底部

问题描述

2 个解决方案

解决方案1
3 2017-01-02 16:31:31

解决方案2
1 2014-02-09 22:25:49

页脚不停留在页面底部

问题描述

2 个解决方案

解决方案1 3 2017-01-02 16:31:31

解决方案2 1 2014-02-09 22:25:49

解决方案1
3 2017-01-02 16:31:31

解决方案2
1 2014-02-09 22:25:49