css - 在某些页面上保持页脚向下，在其他页面上进一步向下推

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/

*/