頁腳絕對定位不同高度的div？

我試圖將此設計（http://revivelab.com/demo_sites/bookthatcondo/）轉換爲wordpress主題，並且您會注意到頁腳具有'position：absolute; bottom：0; top：1500px;'在上面。 1500px是我需要改變的，因爲我不想指定每個頁面獨有的頂部位置。它上面的div是絕對的，所以它們可以爲波形/滑塊效果分層。頁腳絕對定位不同高度的div？

有沒有人有任何建議或提示如何實現這一目標？我是否已有爲網站的其他部分使用絕對定位來實現這些'圖層'？

來源

2012-11-29 ihateartists

好了，我找到了一種方法來做到這一點...這可能是一個有點混亂，但它的工作原理：

你需要找到在div id爲canvas。用一個新的div給出一個新的id（即canvas2）來包裹該div內的所有內容（而不是div本身）。那麼你應該有一些看起來像這樣：

<div id="canvas"> 
    <div id="canvas2"> 
    <!-- all the other code here --> 
    </div> 
</div>

後，你有，你需要拍攝整個頁腳，並將其放在<div id="canvas">裏面，你現在應該有應該像

<div id="canvas"> 
    <div id="canvas2"> 
    <!-- all the other code here --> 
    </div> 
    <div style="<!--Your footer styles here -->"> 
    <!-- footer content here --> 
    </div> 
</div>

後

什麼你這樣做，你的網站會看起來很亂。但那是因爲我們需要移動一些CSS屬性。

現在你的頁腳使用inline styling，看起來像這樣：

style="width:100%;height:269px; background-image:url(img/footer_Wave.png); background-position:50% 0%; background-repeat:no-repeat; position:absolute;bottom:0;top:1500px;"

如果你想繼續使用內聯樣式，只是把它改成這樣： style="width:100%;height:269px; background-image:url(img/footer_Wave.png); background-position:50% 0%; background-repeat:no-repeat; margin-top:50px"

接下來，你#canvas div適用以下款式：

#canvas { 
width: 1024px; 
height: 1000px; 
position: absolute; 
z-index: 5000; 
left: 50%; 
margin-left: -512px; 
}

的變化是這樣的：

#canvas { 
width: 100%; 
position: absolute; 
z-index: 5000; 
}

最後，給#canvas2這些樣式：

#canvas2 { 
width: 1024px; 
margin:auto; 
}

這應該修復它的每一頁。它看起來像很多變化，但其沒有多少真正在所有。希望這有助於

來源

2012-11-29 17:53:41 JCBiggar

非常感謝你，JCBiggar！這工作完美！我討厭打擾，但你可以試着解釋它爲什麼修復它？我非常感謝它已修復，但我想知道下次我做了什麼「錯誤」，如果你不介意=） – ihateartists

它不會讓我在這裏發佈太多。我試着用兩條評論來粘貼它，但它只允許我一次發佈1條評論。抱歉! – JCBiggar

在這裏，我只是把它張貼一個jsfiddle！哈哈！這裏是鏈接：http://jsfiddle.net/g3Avj/2/ – JCBiggar

您絕對不必指定您想要頁面多長時間才能將頁腳粘貼到底部。

改爲嘗試Sticky Footer。它使用負數margin-top，以便您所需知道的是您的頁腳高度，而不是實際頁面的高度。如果你有很多不同的頁面高度，它可以幫助你。

來源

2012-11-29 16:21:27 Jason

粘滯頁腳是否可以與絕對div一起工作？它似乎只是讓頁腳彈出並且在絕對div下' – ihateartists

頁腳絕對定位不同高度的div？

回答

相關問題