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

我在這裏有這個非常簡單的飛濺頁面：http://iph0wnz.com 即使內容較少，我如何對齊網頁右下角的div？

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

，我會盡量給文本例子就像我在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?但沒也不適合我。

我知道這很簡單，但我只是厭倦了嘗試所有可以找到的技巧和竅門。

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

注意：如果需要實現此效果，我不介意使用JavaScript和jQuery。

來源

2009-07-13 aalaap

嘗試這種解決方案：

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

編輯：來不及記得怎麼做，或解釋，但如果你需要「粘頁腳」

更多的幫助搜索谷歌

來源

2009-07-13 09:52:01

這完全有效！萬分感謝！ – aalaap 2009-07-25 03:14:32

嘗試使用位置：絕對與javascripts screen.height一起。

不要認爲這是最好的解決方案，但它前段時間對我很有幫助。可能用jQuery可以達到更好的效果，但我沒有嘗試。

來源

2009-07-13 09:46:34 usoban

使用JavaScript：讓你的屏幕高度，然後動態地創建或什麼的，然後

position:absolute; 
top:<your document height>

應該把你在底部DIV。做同樣的權利對齊。雖然，我不能保證所有瀏覽器的結果。

來源

2009-07-13 09:48:34

東西略有不同，但同樣有用，你可能是：

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

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

來源

2009-07-15 14:01:56 Andrew

我偶然發現這個線程，同時試圖找出如何將表格對齊到我用作瀏覽器背景的網頁的右下角。我用表格的絕對位置，嵌套在一個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的問題，並因此回答我自己的問題:-)

以下是screenshot的鏈接瀏覽器/桌面。您會注意到表格位於瀏覽器背景的右下方，但不是直接位於邊緣。

來源

2015-10-29 12:49:21 Bran

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

回答

相關問題