2013-10-26 101 views
12

http://cdpn.io/FykHr 我似乎有一個問題與合併CSS屬性:位置絕對和底部0

position: absolute; 
bottom: 0; 

首先,你可以看到.footer DIV不不是在底部。現在,將font-size120px更改爲50px,該div似乎按照我的意圖工作。

無論.content div的大小如何讓.footer div停留在底部(不固定在屏幕底部)。

+0

在我的Firefox上,codepen網站(不是你的代碼)不起作用。在Chromium上,您的代碼可以正常工作,而且我無法重現您的問題。 – Oriol

回答

23

您需要將position: relative;添加到父容器,在本例中爲.wrapper

這是一個很好的參考page on absolute positioning

+2

爲我工作。無法讓模式窗口伸展到頁面的底部。在''標記和魔法上設置'position:relative'。 – kgrote

6

有做的一個方法:

body { 
    height: 100%; 
    margin: 0; 
} 
html { 
    padding-bottom: 50px; 
    min-height: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    position: relative; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background-color: red; 
} 

http://jsfiddle.net/n8UNM/

還有一個限制。你必須知道頁腳的高度並將其設置在兩個地方。

+0

根據需要工作:)我希望它對任何其他子元素沒有影響。 – jasxir