即使內容較少，如何在網頁的右下角對齊div？

Question

我在這里有一個非常簡單的啟動頁面： http ： //iph0wnz.com

它的主圖形位於中間，其次是我的'a'。 右下方的徽標。 我希望該徽標與整個頁面的右下角對齊，這意味着如果頁面中有很多文本內容，它會顯示在所有內容之后（即它不會懸停在頂部），但是如果內容較少 - 就像現在一樣 - 然后它應該與屏幕的最底部對齊，而不是在內容之后。

我將嘗試給出一個文本示例，就像我在如何將div的內容對齊到底部一樣？ ：

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

除了上面鏈接的其他問題，我還看了如何強制DIV塊擴展到頁面底部，即使它沒有內容？ 但這對我也沒有用。

我知道這很簡單，但我只是厭倦了嘗試我能找到的所有黑客和技巧。

此外，當實際內容進入時，我想使用該方法將徽標放在網站上 - 它將成為一個博客。

注意：如果需要實現此效果，我不介意使用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; }

在這里找到

編輯：為時已晚，無法記住如何操作或解釋它，但如果您需要更多幫助搜索谷歌“粘性頁腳”

Answer 2

稍微不同但對你有用的東西可能是：

position: fixed;
bottom: 0;
right: 0;

這將使您的div始終位於屏幕的右下角，內容將在其后面流動（有點類似於background-attachment：fixed;）。 也許不完全是你想要的，但肯定比其他一些黑客更容易。 請注意，這在IE6中不起作用。

Answer 3

我偶然發現了這個線程，同時試圖找出如何將表格對齊到我正在使用的網頁右下角作為瀏覽器的背景。 我使用位置：絕對表，嵌套在div中，但是將其與另一個方向對齊。 以下是CSS的外觀：

    div 
        text-align:center

    table 
        position:absolute;
        top:63%;
        left:80%;
        text-align:left;
        background:rgba(0,0,0,0.4);

之后，在HTML中使用表格寬度來實現它的目的。 我希望這有助於任何想要做同樣事情的人 - 並感謝OP和那些花時間回答OP的問題並因此我自己的人:-)

這是我瀏覽器/桌面截圖的鏈接。 您會注意到該表位於瀏覽器背景的右下方，但不是直接位於邊緣。

Answer 4

嘗試使用position：absolute和javascripts screen.height。

不要認為它是最好的解決方案，但它不久前對我有用。 使用jQuery可能會更好地實現這一點，但我沒有嘗試過。

Answer 5

使用JavaScript：獲取屏幕高度，然后動態創建您的或其他

position:absolute;
top:<your document height>

應該把你的div放在最底層。 對正確的對齊做同樣的事情。 雖然，我無法保證所有瀏覽器的結果。