2016-09-25 99 views
0

上午所有,絕對定位使得頁腳disapear

下面的代碼是我的一個網頁簡化模板只是給你它是如何設置出了個主意。我試圖讓我的頁腳粘在容器的底部。我試着在容器中相對位置,並在頁腳中放置絕對底部0px,但是頁腳消失。

我google了一下,但是我似乎能夠找到的唯一答案是告訴我做我已經在上面嘗試過的東西。

有沒有人知道什麼是錯的?

感謝

<html> 
<body> 
<div id="container" style="width:1000px; height:1000px; margin-top:0px; border-left:1px solid black; border-right:1px solid black; position:relative;"> 

<div> 
some content here 
</div> 


<div id="footer" style="height:15px; background-color:red; position:absolute; bottom:0px; "> 
</div> 


</div><!-- container end --> 
</body> 
</html> 
+0

請縮進代碼你張貼正常。 – connexo

+0

應用'position:absolute;'來阻止關卡元素使他們失去了貪婪地抓取所有寬度的行爲。相反,它們變成與其內容一樣寬的元素。沒有內容,沒有寬度。所以你的問題是通過改變你的問題標題來解決的。***絕對定位使頁腳失去寬度***。 – connexo

回答

1

。在你的代碼中沒有錯誤,只是你還沒有添加css width#footer,即使你不添加寬度,那麼你仍然需要在它的一些內容,然後它會起作用。目前你的#footer div是空的。

<div id="container" style="width:1000px; height:1000px; margin-top:0px; position:relative; background:red"> 
 

 
    <div style="background:yellow"> 
 
    some content here 
 
    </div> 
 

 

 
    <div id="footer" style="width:100%; height:15px; background:pink; position:absolute; bottom:0px; "> 
 
    </div> 
 

 

 
</div>