如何在网页右下角对齐div，即使内容较少？ [英] How do I align a div at the bottom right corner of a web page even if the content is less?

问题描述

这里有非常简单的启动页面： http://iph0wnz.com

I have this extremely simple splash page here: http://iph0wnz.com

它的中间有主图形，右下方是我的a。标志。我想让该徽标与整个页面的右下角对齐，这意味着如果页面中有很多文本内容，它会显示在后面（即它不会悬停在顶部），但是如果有更少的内容 - 如现在 - 然后它应该对齐到屏幕的底部，而不是紧接的内容后。

It has the main graphic in the middle, followed by my 'a.' logo at the bottom right. I want that logo to be aligned to the bottom right hand of the entire page, which means that if there is a lot of text content in the page, it appears after all that (i.e. it doesn't hover on top), but if there is less content -- like right now -- then it should get aligned to the very bottom of the screen, and not right after the content.

我会尝试提供一个文字范例，例如如何将div的内容与css对齐？：

I'll try to give a textual example like I saw in How to align content of a div to the bottom with css?:

    -----------------------------
    | 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. |
    -----------------------------

除了上面提到的其他问题，我还查看了

Apart from that other question linked above, I also looked at How do I force a DIV block to extend to the bottom of a page even if it has no content? but that didn't work for me either.

我知道这很简单，但我只是厌倦了所有的黑客和技巧我可以找到。

I know this is dead simple, but I'm just tired of trying all the hacks and tricks I could find.

此外，我想使用该方法在实际内容进入时将标志放在网站上 - 它将是一个博客。

Also, I'd like to use the method to put the logo on the site when the actual content goes in - it's going to be a blog.

注意：我不介意使用JavaScript和jQuery来实现这个效果。

Note: I don't mind using JavaScript and jQuery if required to achieve this effect.

推荐答案

尝试此解决方案：

* { 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; }

找到这里

编辑：太晚记得怎么做或解释它，但如果你需要更多的帮助搜索google sticky footer

too late to remember how to do it or to explain it, but if you need more help search google for "sticky footer"

这篇关于如何在网页右下角对齐div，即使内容较少？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！