使用CSS或jQuery的粘性頁腳

Question

即使滾動，如何設置div停留在瀏覽器屏幕的底部？

Answer 1

假設您有以下div

<div class="footer">This is at the bottom</div>

您可以使用以下CSS將其固定在視口的底部

.footer {
  position: fixed;
  bottom: 0;
}

即使滾動，它也會停留在那里。

Answer 2

使用position: fixed附加到該div的CSS的position: fixed屬性。

#footer {
    position:fixed;
    bottom:0;
}

Answer 3

試試這個CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

CSS來源： http ： //ryanfait.com/sticky-footer/

Answer 4

粘貼頁腳的實現

請看一看

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

Answer 5

有一個出色的頁腳教程，網址為

http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/

演示頁面在這里：

http://www.lwis.net/profile/CSS/sticky-footer.html

基本前提是主體頁面被拉伸到頁面的100％。 最小高度也為100％。

然后為頁腳提供以下規則：

#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}

我回答這個