Question

即使滚动，如何在浏览器屏幕底部设置div停留？

Answer 1

假设您有以下div

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

您可以使用以下CSS

将其粘贴在视口的底部

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

即使滚动也会停留在那里。

Answer 2

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

#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;
}

我从this

得到答案

粘性页脚使用CSS或jquery

5 个答案: