粘性页脚 chrome 不适用于动态内容答案

【问题标题】：Sticky footer chrome does not work with dynamic contents粘性页脚 chrome 不适用于动态内容
【发布时间】：2014-09-12 05:37:21
【问题描述】：

我最近注意到，在某些版本的 Google Chrome 中，当内容由脚本生成时，指南针使用的经典的纯 CSS 粘页脚解决方案不起作用。页脚只是覆盖内容而不是向下移动。当您调整窗口大小时，布局将更改为正确的布局。 compass 中的 css/html 是基于http://ryanfait.com/resources/footer-stick-to-bottom-of-page/提供的解决方案

html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%; 
  margin: 0 auto -4em;
}
.footer, .push {
 height: 4em;
}

带有以下html：

任何想法，如何解决这个问题？

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
       <div class="footer">
            <p>Copyright (c) 2008</p>
       </div>
   </body>
</html>

【问题讨论】：

我遇到了类似的问题。这似乎是一个铬错误。由于window.resize chrome 将重新绘制有问题的页脚。

标签： javascript html css google-chrome compass-sass

【解决方案1】：

我觉得你应该加clear:both

.footer, .push  
  {
 clear:both; 
 height: 4em;
  }

或试试这个链接

http://css-tricks.com/snippets/css/sticky-footer/

【讨论】：

试试这个，对你有帮助stackoverflow.com/questions/9385313/…
stackoverflow.com/questions/42294/…
不，问题在于动态生成的内容。一切都适用于静态生成的内容，或在其他浏览器中。

【解决方案2】：

我也有这个问题。动态表正在重叠，但我的其他页面都没有。这个解决方案对我有用。

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%; 
  margin: 0 auto;      /*!! margin: 0 auto -4em; !!*/
}

【讨论】：

【解决方案3】：

html,body {
    margin:0;
    padding:0;
    height:100%;
}
p {
    margin-top:0;
}
.push{
    height:4em;
}
.wrapper {
    position:relative;
    z-index:1;
    margin:0 auto;
    min-height: 100%;
    height: auto;
}
.footer{
    position:relative;
    z-index:2;
    height: 4em;
    margin-top:-4em; /*!!!*/
}

【讨论】：

我知道，有很多基于 100% 技巧的 css 解决方案。问题是，在 chrome 中动态生成内容的情况下，它们都不起作用。