Question

我最近注意到，在某些版本的Google Chrome中，当脚本生成内容时，指南针使用的经典css粘贴页脚解决方案无效。页脚只覆盖内容而不是向下移动。调整窗口大小时，布局将更改为更正。罗盘中的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>

Answer 1

我认为你应该添加clear:both

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

或尝试此链接

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

Answer 2

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

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

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

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

3 个答案: