CSS：在頁面底部（不可見的）位置元素

http://jsfiddle.net/vol7ron/bKWtM/CSS：在頁面底部（不可見的）位置元素

<body> 
    <div id="head"></div> 
    <div id="body"></div> 
    <div id="foot"></div> 
</body>

body { padding:0;margin:0;} 
#head { position:absolute; height:20px; width:100%; background:#900; top:0; } 
#foot { position:absolute; height:20px; width:100%; background:#090; bottom:0; } 
#body { position:absolute; top:0; z-index:2;}

// filler 
for (var i=1,n=50;i<=n;i++){ 
    $('#body').append('<div>' + i + ' (filler) </div>'); 
}

我想要做的是位置t他腳註在文件的最底部，而不是開放窗口。所以綠線會出現在第50行之後，並且不會出現在開放視圖中。

我正在尋找經典的佈局，如果沒有絕對定位，標題將位於頂部，然後是正文，那麼您必須滾動才能查看頁腳。唯一的區別是我希望身體重疊標題（因此絕對定位）。

注：

我不想頁腳有固定的定位。。
我不想使用JavaScript

任何幫助，將不勝感激。

來源

2011-08-09 vol7ron

你已經使自己不必要的複雜。如果您唯一的目標是將正文與標題重疊，那麼您可以使用負邊距。那麼你可以把所有的東西放在靜態位置。

工作例如：http://jsfiddle.net/uaBpx/1/

否則，沒有辦法，我能想到的定位在文檔底部的東西，因爲在你的榜樣原稿的高度實際上是0px。一旦你拉出所有的內容（通過絕對定位），沒有高度。

來源

2011-08-09 04:44:26 OverZealous

我認爲你是對的:)我會在我的實際頁面上給它一個鏡頭。我不知道爲什麼我試圖讓它變得如此困難 – vol7ron

CSS：在頁面底部（不可見的）位置元素

回答

相關問題