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

标签 javascript html css google-chrome compass-sass

我最近注意到,在某些版本的 Google Chrome 中,当内容由脚本生成时,Compass 使用的经典的纯 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>

最佳答案

我认为你应该添加 clear:both

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

或者试试这个链接

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

关于javascript - 粘性页脚 chrome 不适用于动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11535006/

相关文章:

javascript - Rollup 生成空包

html - Bootstrap 列宽 - 删除其他容器时自动调整大小

html - 右对齐的背景图像不遵循主体最小宽度

javascript - 是否可以对 ES6 map 对象进行排序?

javascript - 修复了表格顶行和意外调整大小的问题

html - 导航栏仅在滚动后显示

html - 电子邮件不以 iphone 5 和 6 为中心

HTML/CSS 上传文件

javascript - 将图像裁剪为宽高比 1 :1

html - Bootstrap 模式失焦