1

我最近注意到，在某些版本的 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>
4

3 回答 3

1

我认为你应该添加clear:both

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

或试试这个链接

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

于 2012-07-18T06:10:09.387 回答
1

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

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%; 
  margin: 0 auto;      /*!! margin: 0 auto -4em; !!*/
}
于 2014-09-11T21:37:21.757 回答
0 
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-18T06:21:20.373 回答