http://cdpn.io/FykHr 我似乎有一個問題與合併CSS屬性:位置絕對和底部0
position: absolute;
bottom: 0;
首先,你可以看到.footer DIV不不是在底部。現在,將font-size
從120px
更改爲50px
,該div似乎按照我的意圖工作。
無論.content div的大小如何讓.footer div停留在底部(不固定在屏幕底部)。
http://cdpn.io/FykHr 我似乎有一個問題與合併CSS屬性:位置絕對和底部0
position: absolute;
bottom: 0;
首先,你可以看到.footer DIV不不是在底部。現在,將font-size
從120px
更改爲50px
,該div似乎按照我的意圖工作。
無論.content div的大小如何讓.footer div停留在底部(不固定在屏幕底部)。
您需要將position: relative;
添加到父容器,在本例中爲.wrapper
。
這是一個很好的參考page on absolute positioning。
爲我工作。無法讓模式窗口伸展到頁面的底部。在''標記和魔法上設置'position:relative'。 – kgrote
有做的一個方法:
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;
}
還有一個限制。你必須知道頁腳的高度並將其設置在兩個地方。
根據需要工作:)我希望它對任何其他子元素沒有影響。 – jasxir
在我的Firefox上,codepen網站(不是你的代碼)不起作用。在Chromium上,您的代碼可以正常工作,而且我無法重現您的問題。 – Oriol