Home/ Questions/Q 8257213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T02:07:18+00:00

I have recently noticed, that in some versions of Google Chrome the classic css-only

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0