Question

我有一个网站（它实际上是我课程的作业），页脚固定在页面底部：

position: absolute;

bottom: 0;

但是网站中有一个页面的内容在屏幕底部下方展开，页脚停留在屏幕底部而不是位于内容下方。因此，当内容适合一个屏幕时，我需要我的页脚停留在屏幕的底部，当屏幕上有更多内容时，我需要坐在屏幕下方。我已经尝试了所有这些：

clear: both - on wrapper and content (already on footer)

position: relative, static, fixed

min-height - didn't change anything

height: 100%

overflow: hidden

vertical-align: all values plus a length

我还尝试仅在该页面上为页脚使用单独的ID。但我无法让它发挥作用。

Answer 1

我相信你正在寻找像http://ryanfait.com/sticky-footer/

这样的东西

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}

footer, .push {
    height: 155px; /* '.push' must be the same height as 'footer' */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

用一些页面保持页脚向下，将其向下推到其他页面

1 个答案: