顯示頁腳固定在右下角，Deafult已離開（CSS/HTML5）

我試圖將頁腳放在頁面右下角。我正在使用HTML5的<footer>標籤。顯示頁腳固定在右下角，Deafult已離開（CSS/HTML5）

所以，這裏是我在我的CSS：

footer { 
    position:absolute; 
    bottom: 0px; 
    float: right; 
    height: 35px; 
    margin: 0px 50px 0px 0px; 
    background: #9FF; 
    color: #000; 
    text-align: right; 
    padding: 10px 30px; 
}

有了這個代碼頁腳完全粘在底部。我想要的是它也應該位於頁腳的最右側。

http://i47.tinypic.com/2rrox0w.png

所以，當我使用下面的代碼：right: 50px在CSS。然後頁腳被定位爲相對於瀏覽器。所以，無論何時我調整我的瀏覽器的頁腳都是錯位的。

我想要什麼？

我想將頁腳放置在底部。並且在距容器（#main或#maincontent）50px（右側）的頁邊距內放置，而非瀏覽器。 float: right似乎不起作用。

我看了整個互聯網和計算器以及。但是，找不到解決這類問題的辦法。

我使用的是谷歌瀏覽器22.所以，我的瀏覽器基本上與HTML5兼容。

來源

2012-10-01 Rohitink

更新：你不需要將它定位絕對的，只是刪除的位置，給予一定的寬度，以您的頁腳和浮它向右這樣

footer { 
    float: right; 
    height: 35px; 
    margin: 0px 50px 0px 0px; 
    background: #9FF; 
    color: #000; 
    text-align: right; 
    padding: 10px 30px; 
    width: 180px; 
}

My New Fiddle

來源

2012-10-01 18:13:24

這仍然是相對於窗口，除非他將其父母設置爲「相對」。 – BenM

@BenM是的，當然，如果他知道定位... –

@先生阿里恩我做了你所說的。這種工作。但是，有了這個，頁腳不再顯示在瀏覽器的底部。但是，它正確放置在#maincontainer的右下角。 – Rohitink

將position: relative添加到容器，然後使用right屬性。

所以，你完全CSS會是這個樣子：

#main, 
#maincontent { 
    position: relative; 
} 

footer { 
    position: absolute; 
    bottom: 0px; 
    right: 50px; 
    height: 35px; 
    margin: 0px 50px 0px 0px; 
    background: #9FF; 
    color: #000; 
    text-align: right; 
    padding: 10px 30px; 
}

來源

2012-10-01 18:11:46 BenM

元素得到正確的位置。但是頁腳開始顯示在#maincontent的頂部。 – Rohitink

請將您的HTML和CSS發佈到jsFiddle中。 – BenM

http://jsfiddle.net/Lx8Ca/ – Rohitink

刪除float並給予right:50px（或你想要的值）它。如果它仍然無效，請給clear:both;，並檢查您的padding和margin值。

來源

2012-10-01 18:12:09

您需要創建使用與#main或#maincontent相同的集中式容器。然後使用該頁腳容器內的頁邊距。

來源

2012-10-01 18:20:45 Derik

顯示頁腳固定在右下角，Deafult已離開（CSS/HTML5）

回答

相關問題