html - 如何在内容较少的情况下将网页右下角的 div 对齐？

Question

我这里有这个极其简单的初始页面:http://iph0wnz.com

中间是主图形，后面是我的“a”。右下角的标志。我希望该 Logo 与整个 页面 的右下角对齐，这意味着如果页面中有很多文本内容，它会出现(即它不会悬停在顶部)，但如果内容较少(就像现在一样)，则它应该与屏幕的最底部对齐，而不是紧跟在内容之后。

我将尝试给出一个我在 How to align content of a div to the bottom? 中看到的文本示例:

    -----------------------------
    | less content, no scroll   |
    |                           |
    |                           |
    |                           |
    |                        a. |
    ----------------------------- (screen height)

和

    -----------------------------
    | more content, yes scroll  |
    | the quick brown fox jump- |
    | ped over the lazy dog an- |
    | d she sells sea shells on |
    | the sea shore and some o- |
    | ther random text is put   | (screen height)
    | here so there is a scroll |
    | bar because the content   |
    | is too much for one scre- |
    | en to show. okay, I think |
    | that is enough.           |
    |                        a. |
    -----------------------------

除了上面链接的其他问题，我还查看了 How do I force a DIV block to extend to the bottom of a page even if it has no content?但这对我也不起作用。

我知道这非常简单，但我只是厌倦了尝试我能找到的所有黑客和技巧。

另外，当实际内容进入时，我想使用这种方法将 Logo 放在网站上 - 这将是一个博客。

注意:如果需要实现此效果，我不介意使用 JavaScript 和 jQuery。

Answer 1

试试这个解决方案:

* { margin: 0; }
html, body { height: 100%; }
/* the bottom margin is the negative value of the footer's height */
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; }
/* .push must be the same height as .footer */
.footer, .push { height: 142px; }

找到 here

编辑:来不及记住如何去做或解释它，但如果您需要更多帮助，请在谷歌上搜索“sticky footer”