实现“粘性页脚”时浏览器之间的行为不一致答案

【问题标题】：Inconsistent behavior among browsers when implementing a 'sticky footer'实现“粘性页脚”时浏览器之间的行为不一致
【发布时间】：2014-05-02 15:23:12
【问题描述】：

我已经数不清我读过多少关于这个主题的帖子了。坦率地说，我不是 CSS 专家。我预订了一个在 Firefox 和 Chrome 中完美运行但在 IE9 及更高版本中失败的“粘性页脚”。（它在IE中的位置随浏览器窗口的高度而变化。在其他浏览器中它固定在底部。）

css如下：

#footer {
    position:relative;
    margin-top: -150px; 
    height: 150px;
    clear: both;
    bottom:0px;
}

html（在母版页中）如下：

 <footer>
     <div id="footer">
        <div style="margin: auto;">

        </div>
        <br />
        <div style="text-align: center; margin: auto; margin-left: auto; 
             margin-right: auto; width: 100%; margin-bottom: auto">
               <p>&copy; Copywrite blurb and date here</p>
         </div>
      </div>
 </footer>

建议？

【问题讨论】：

ryanfait.com/sticky-footer/layout.css

标签： html css internet-explorer footer sticky

【解决方案1】：

我也有点菜鸟，但我觉得这是“位置：相对”可能会弄乱您的代码。您的页脚是否包含在另一个 div 中？

也许可以尝试将您的页面包装在一个高度为 100% 的内容 div 中，然后相对于它而不是页面定位。

或者也许将 body 和 html 设置为 height: 100%。页脚周围元素的当前高度是多少？

只是提出一些想法。 :)

【讨论】：

我将不得不暂时搁置这个问题。我被告知我当前的代码现在“足够好”。其他优先事项太多。也许在接下来的几个月里，我会尝试更多。

【解决方案2】：

对于您希望使用固定位置的经典网站。对于更现代、更流畅的应用程序，如 web 应用程序位置绝对运行良好。您可以在我的演示网络应用程序http://movies.spawebbook.com 上看到后者。

#footer { position:absolute; height: 150px; clear: both; bottom:0; left: 0; right: 0; }

【讨论】：

克里斯无意冒犯，但我在您的网页上没有看到任何我称之为“页脚”的内容。（虽然看起来很棒。）
大声笑，看到源代码。有一个页脚元素。当应用程序位于 600 像素宽以下的窗口中时，它用于屏幕底部的 appBar。顶部导航被隐藏，工具栏接管。检查标记，您可以看到它。