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

我最近注意到，在某些版本的Google Chrome浏览器中，由脚本生成内容时，指南针使用的经典css-only粘性页脚解决方案不起作用。页脚仅覆盖内容而不是向下移动。调整窗口大小时，布局将更改为正确的布局。指南针的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>

来源

2012-07-18 Samuel Hapak

我有类似的问题。这似乎是一个铬错误。由于'window.resize'上的铬会重新绘制车尾页脚。 – HaNdTriX 2014-11-05 21:12:54

我想你应该添加clear:both

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

或尝试此链接

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

来源

2012-07-18 06:10:09 Prashobh

不解决问题。 – 2012-07-19 09:09:22

试试这个，可以帮助你http://stackoverflow.com/questions/9385313/sticky-footer-or-rather-content-doesnt-stretch-down-to-footer – Prashobh 2012-07-19 09:13:37

http://stackoverflow.com/questions/ 42294 /如何获取页脚底部的网页 – Prashobh 2012-07-19 09:14:52

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; /*!!!*/ 
}

来源

2012-07-18 06:21:20 Jane

我知道，有很多基于100％技巧的css解决方案。问题是，它们都不适用于chrome中动态生成的内容。 – 2012-07-19 11:50:00

我有这个问题为好。动态表格正在重叠，但我的其他页面都没有。这个解决方案为我工作。

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

来源

2014-09-11 21:37:21

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

回答

相关问题