Html 在实现'；粘性页脚'；

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

css如下所示：

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

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

html（母版页中）如下所示：

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

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

&抄袭；在此处抄写宣传语和日期

---

建议？

我也有点不懂装懂，但我觉得“位置：相对”可能会弄乱你的代码。您的页脚是否被另一个div包装

也许可以尝试将页面包装在一个高度为100%的内容分区中，然后相对于该分区而不是页面进行定位

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

---

只是提出一些想法而已。：）

对于要使用位置固定的经典网站。对于更现代、更流畅、类似应用程序的web应用程序，position absolute运行良好。您可以在我的演示web应用程序上看到后者

#页脚{
位置：绝对位置；
高度：150像素；
明确：两者皆有；
底部：0；
左：0；
右：0；
}

我无意冒犯你，但我在你的网页上没有看到任何我称之为“页脚”的东西。（虽然看起来很棒）哈哈，我看到了源代码。有一个页脚元素。当应用程序位于小于600像素宽的窗口中时，它用于屏幕底部的appBar。顶部导航被隐藏，工具栏接管。检查一下标记，你就可以看到了。我不得不把这个问题推迟一段时间。有人告诉我，目前我的代码“足够好”。太多其他优先事项。也许在接下来的几个月里，我会尝试更多的东西。