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 に答える