固定頁腳和短屏幕

你有任何建議如何使固定定位頁腳在短屏幕/低分辨率上工作？固定頁腳和短屏幕

我有頁腳：

#footer {position: fixed; bottom: 0; width: 100%; height: 35px; background: rgba(0, 0, 0, 0.3); line-height: 35px; color: #fff; font-size: 14px; text-transform: uppercase}

工作於大部分的決議很好，但是當屏幕高度較小然後900px，因爲它固定它重疊的內容。你如何解決這些問題？我正在考慮用js檢查屏幕分辨率，然後而不是固定給它的位置：相對。你怎麼看？

來源

2013-10-03 dease

CSS媒體查詢 – MLeFevre

@dease檢查回答以下 –

它是否真的需要修復？在幾個瀏覽器中，支持仍然有點草率...如果它絕對定位，您可以在主內容中添加填充，以便頁腳不會重疊內容。

無論如何，你試圖做的事情可以很容易地用CSS媒體查詢來完成。你可以從這裏開始：http://css-tricks.com/css-media-queries/

來源

2013-10-03 08:51:00 MrMerrick

給出Z-index = 10; （一些較高的Z-index使其脫穎而出）

來源

2013-10-03 08:50:11

但隨後它會站出來過的內容，我想實現的是檢測短屏幕，然後以某種方式移動內容。 – dease

你可以試試這個 CSS：

html,body{position:relative; margin:0; padding:0; height:100%} 

.footer{ position:fixed; height:30px; background-color:grey; width:100%; bottom:0px; z-index:999}

來源

2013-10-03 09:57:45

固定頁腳和短屏幕

回答

相關問題