將與內容頁腳定位爲絕對

我有一個包含網頁上的所有內容的包裝類。問題是如果內容是絕對放置的，它會吃掉我的頁腳。我必須將內容放在絕對位置。將與內容頁腳定位爲絕對

好像頁腳不列入識別出內容是絕對的。我的繼承人代碼

<style> 

* { 
    margin: 0; 
    } 
    html, body { 
    height: 100%; 
    } 
    .wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
    } 
    .footer, .push { 

    height: 4em; 
    } 
</style> 
</head> 

<body> 
<div class="wrapper"> 
<img src="activity/Chrysanthemum.jpg" style="z-index: 1; position:absolute; width: 420px; height: 400px; left: 100px;top:260px; "> 
<div class="push"> 
</div> 
</div> 
<div class="footer" >copyrights</div> 
</body>

如果我通過刪除position:absolute屬性改變的影像風格，一切看起來都很正常。所以我的問題是我們如何將頁腳放置在絕對定位內容的底部？

來源

2011-10-23 samach

谷歌的CSS粘頁腳'，你會發現一些好的辦法做到這一點 –

好象他做了那莫因。我看到的問題是唯一的內容是絕對img的包裝，我認爲這是一個問題。 –

是的，我確實嘗試了'www.cssstickyfooter.com'方法，但它的nt工作！是否有可能將頁腳粘貼到絕對內容的底部？ – samach

更新的答案，關於評論。
正如我在之前的回答中所提到的，使用純CSS無法實現此效果。所以，我將展示JavaScript方法。添加相關標識（見Fiddle），並在你的身體的末尾添加以下代碼。這段代碼將在必要時調整你的包裝。
注意：當頁面小於窗口高度時，頁面包裝仍將佔據全部高度，因爲無法通過絕對定位的元素區分高度變化。

<script> 
(function(){ 
    var wrapper = document.getElementById("wrapper"); 
    var height = document.documentElement.scrollHeight; 
    wrapper.style.height = height + "px"; 
})(); 
</script>

以前的答案：
問題是由絕對定位的元素不會影響其父的高度/寬度造成的事實。

要解決你的代碼，應用下面的CSS（只顯示相關的CSS，通過更新描述性註釋後綴）。 小提琴：http://jsfiddle.net/4ja2V/

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; /* Get rid off the padding */ 
} 
.wrapper { 
    position: relative; /* Necessary to properly deal with absolutely positioned 
          child elements. */ 
    height: 100%; 
    margin: 0 auto 4em; /* So that the content is visible when scrolled down*/ 
} 
.footer { 
    height: 4em; 
    position: fixed; /* Positions your footer at a fixed position in the window*/ 
    bottom: 0; /* At the bottom of the window*/ 
}

你使用的是負底邊距.wrapper，這引起了元素「吃」頁腳。當你使用絕對的內部元素時，沒有可靠的純CSS方法來獲取.wrapper元素的實際寬度/高度。因此出現position:fixed。

頁腳被定義爲具有的4em的高度。由於頁腳位於固定的位置（即向下滾動時元素不會移動），因此需要在包裝元素的底部應用額外的邊距。

來源

2011-10-23 11:53:21

非常感謝答案..如果問題有點誤導，我很抱歉。我看到了小提琴，我想要做的是將版權文本放在你的演示中的紅色框中。所以簡而言之，如果有一個垂直滾動條，頁腳就會位於底部，並且在沒有滾動條的情況下，頁腳不會位於視口的底部。 – samach

@Salmanmahmood更新回答，添加JavaScript方法。 –

awsum搶！非常感謝你.. – samach

給您的頁腳固定HIGHT，然後在絕對一流的，做

bottom: heightOfYourFooter + 5px;

來源

2011-10-23 11:29:50 Shaheer

它不工作...像'底部'屬性的路線與'頂部'和'左'屬性使用時沒有效果 – samach

它不會正常工作，如果你「頂」屬性嘗試刪除它 – Shaheer

將與內容頁腳定位爲絕對

回答

相關問題