html - 实现 'sticky footer' 时浏览器之间的行为不一致

Question

我已经记不清我读过多少篇关于这个主题的文章了。坦率地说，我不是 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>

建议？

Answer 1

我也有点菜鸟，但我觉得是“position:relative”可能会弄乱您的代码。您的页脚是否包裹在另一个 div 中？

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

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

只是抛出一些想法。 :)