粘性頁腳鉻不適用於動態內容

我最近注意到，在某些版本的Google Chrome瀏覽器中，由腳本生成內容時，指南針使用的經典css-only粘性頁腳解決方案不起作用。頁腳僅覆蓋內容而不是向下移動。調整窗口大小時，佈局將更改爲正確的佈局。指南針的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>

來源

2012-07-18 Samuel Hapak

我有類似的問題。這似乎是一個鉻錯誤。由於'window.resize'上的鉻會重新繪製車尾頁腳。 – HaNdTriX 2014-11-05 21:12:54

我想你應該添加clear:both

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

或嘗試此鏈接

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

來源

2012-07-18 06:10:09 Prashobh

不解決問題。 – 2012-07-19 09:09:22

試試這個，可以幫助你http://stackoverflow.com/questions/9385313/sticky-footer-or-rather-content-doesnt-stretch-down-to-footer – Prashobh 2012-07-19 09:13:37

http://stackoverflow.com/questions/ 42294 /如何獲取頁腳底部的網頁 – Prashobh 2012-07-19 09:14:52

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-18 06:21:20 Jane

我知道，有很多基於100％技巧的css解決方案。問題是，它們都不適用於chrome中動態生成的內容。 – 2012-07-19 11:50:00

我有這個問題爲好。動態表格正在重疊，但我的其他頁面都沒有。這個解決方案爲我工作。

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

來源

2014-09-11 21:37:21

粘性頁腳鉻不適用於動態內容

回答

相關問題