固定页脚和短屏幕答案

【问题标题】：Fixed footer and short screen固定页脚和短屏幕
【发布时间】：2013-10-03 08:42:46
【问题描述】：

您对如何使固定定位的页脚在短屏幕/较低分辨率上工作有什么建议吗？

我有页脚：

#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}

在大多数分辨率下都可以正常工作，但是当屏幕高度小于 900 像素时，因为它是固定的，它会与内容重叠。你如何解决这些问题？我正在考虑用 js 检查屏幕分辨率，而不是固定给它位置：相对。你怎么看？

【问题讨论】：

@dease 检查以下答案

标签： css layout css-position

【解决方案1】：

真的需要修复吗？一些浏览器的支持仍然有点草率......如果它是绝对定位的，您可以在主要内容中添加一个填充，这样页脚就不会与内容重叠。

无论如何，您想要做的事情都可以通过 css 媒体查询轻松完成。你可以从这里开始：http://css-tricks.com/css-media-queries/

【讨论】：

【解决方案2】：

给定 Z-index = 10; （一些更高的 Z-index 以使其脱颖而出）

【讨论】：

但是它会在内容上脱颖而出，我想要实现的是检测短屏幕，然后以某种方式将内容移动到下方。

【解决方案3】：

你可以试试这个 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}

【讨论】：