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

我也有点像菜鸟，但我觉得这是一个位置：亲戚＆＃39;这可能会弄乱你的代码。你的页脚是否包含在另一个div中？

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

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

只是抛出一些想法。：）

Answer 2

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

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

实现粘性页脚时浏览器之间的行为不一致＆＃39;

2 个答案: