Javascript 粘性页脚chrome不适用于动态内容_Javascript_Html_Css_Google Chrome_Compass Sass

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

javascript html css google-chrome

Javascript 粘性页脚chrome不适用于动态内容,javascript,html,css,google-chrome,compass-sass,Javascript,Html,Css,Google Chrome,Compass Sass,我最近注意到，在谷歌Chrome的一些版本中，compass使用的经典css唯一粘性页脚解决方案在内容由脚本生成时不起作用。页脚只覆盖内容，而不是向下移动。调整窗口大小时，布局将更改为正确的布局。compass中的css/html基于上提供的解决方案使用以下html：有什么想法，怎么解决这个问题 <html> <head> <link rel="stylesheet" href="layout.css" ... /> <

我最近注意到，在谷歌Chrome的一些版本中，compass使用的经典css唯一粘性页脚解决方案在内容由脚本生成时不起作用。页脚只覆盖内容，而不是向下移动。调整窗口大小时，布局将更改为正确的布局。compass中的css/html基于上提供的解决方案

使用以下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>


你的网站内容在这里
版权所有（c）2008

我认为您应该添加

清楚：两者都是
.footer, .push  
  {
 clear:both; 
 height: 4em;
  }

或者试试这个链接
我也有这个问题。一个动态表正在重叠，但我的其他页面都没有。这个解决方案对我有效
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%; 
  margin: 0 auto;      /*!! margin: 0 auto -4em; !!*/
}

试试这个，可能对你有帮助不，问题是动态生成的内容。任何东西都可以使用静态生成的内容，或者在其他浏览器中使用。我知道，有很多基于100%技巧的css解决方案。问题是，在chrome中动态生成内容的情况下，它们都不起作用。我有一个类似的问题。这似乎是一个chrome bug。从window.resize开始，chrome将重新绘制错误的页脚。
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; /*!!!*/
}

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