Sticky footer chrome does not work with dynamic contents

Question

I have recently noticed, that in some versions of Google Chrome the classic css-only sticky footer solution used by compass do not work, when contents is generated by script. The footer just cover the contents instead of moving down. The layout will change to correct one when you resize your window. The css/html in compass is based on solution provided on 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;
}

With following html:

Any ideas, how to fix this?

<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>

I am having a similar issue. It seems to be a chrome bug. Since on `window.resize` chrome will repaint the buggy footer. — HaNdTriX, Nov 05 '14 at 21:12

Prashobh · Accepted Answer · 2012-07-18T06:23:15.123

1

I think you should add clear:both

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

or try this link

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

edited Jul 18 '12 at 06:23

answered Jul 18 '12 at 06:10

Prashobh

9,216
15
61
91

try this one,may help you http://stackoverflow.com/questions/9385313/sticky-footer-or-rather-content-doesnt-stretch-down-to-footer – Prashobh Jul 19 '12 at 09:13
http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page – Prashobh Jul 19 '12 at 09:14
No, the problem is with dynamically generated contents. Everything works with statically generated contents, or in other browsers. – Samuel Hapak Jul 19 '12 at 11:48

score 1 · Answer 2 · answered Sep 11 '14 at 21:37

I had this problem as well. A dynamic table was getting overlapped, but none of my other pages. This solution worked for me.

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

score 0 · Answer 3 · answered Jul 18 '12 at 06:21

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

answered Jul 18 '12 at 06:21

Jane

208
2
9

I know, there are lot of css solutions based on 100% trick. The problem is, that none of them works in case of dynamically generated contents in chrome. – Samuel Hapak Jul 19 '12 at 11:50

Sticky footer chrome does not work with dynamic contents

3 Answers3