尝试在内容和侧栏周围放置容器div(带有overflow:auto)。

如果这不起作用，您是否有任何页脚显示不正确的截图或示例链接?

下面是一个使用jQuery的解决方案，它就像一个魅力。它检查窗口的高度是否大于主体的高度。如果是，则更改页脚的边距顶部以进行补偿。在Firefox, Chrome, Safari和Opera中测试。

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

如果你的页脚已经有一个边距顶部(50像素，例如)，你将需要改变最后一部分:

css( 'margin-top', height_diff + 50 )

我自己有时也与此斗争，我总是发现所有这些div在彼此之间的解决方案是一个混乱的解决方案。 我只是胡乱摆弄了一下，我个人发现这是有效的，而且这当然是最简单的方法之一:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

我喜欢这样做的原因是不需要应用额外的HTML。您可以简单地添加这个CSS，然后编写您的HTML

一个类似于@gcedo的解决方案，但不需要添加中间内容来向下推页脚。我们可以简单地添加margin-top:auto到页脚，不管它的高度或上面内容的高度，它都会被推到页面的底部。

身体{ 显示:flex; flex-direction:列; 最小高度:100 vh; 保证金:0; ｝ .content { 填充:50 px; 背景:红色; ｝ .footer { margin-top:汽车; 填充:10 px; 背景:绿色; ｝ < div class = "内容" > 这里有些内容 < / div > <页脚类= >“页脚” 一些内容 < /页脚>

你可以使用position: absolute following将页脚放在页面的底部，但要确保你的两列有适当的边距-底部，这样它们就不会被页脚遮挡。

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

使用CSS vh单位!

也许最明显的和非hack的方法来处理粘脚将是使用新的css视口单位。

以下面的简单标记为例:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

如果页眉是80px高，页脚是40px高，那么我们可以在content div上用一个规则来创建我们的sticky footer:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

这意味着:让内容div的高度至少等于视口高度减去页眉和页脚高度的总和。

就是这样。

* { 保证金:0; 填充:0; ｝ 标题{ 背景:黄色; 身高:80 px; ｝ .content { Min-height: calc(100vh - 120px); /* 80px页眉+ 40px页脚= 120px */ 背景:粉色; ｝ 页脚{ 高度:40像素; 背景:水; ｝ <header>header goes here</header> <div class="content">这个页面内容很少 这是我的页脚</footer>

... and here's how the same code works with lots of content in the content div: * { margin:0; padding:0; } header { background: yellow; height: 80px; } .content { min-height: calc(100vh - 120px); /* 80px header + 40px footer = 120px */ background: pink; } footer { height: 40px; background: aqua; } <header>header goes here</header> <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </div> <footer> This is my footer </footer>

NB:

1)必须知道页眉和页脚的高度

2)旧版本的IE (IE8-)和Android(4.4-)不支持视口单元。(caniuse)

3)曾经webkit在一个calc规则中有一个视口单位的问题。这确实是固定的(见这里)，所以没有问题。然而，如果你因为某些原因想避免使用calc，你可以使用负边距和box-sizing -填充来绕过它

像这样: * { 保证金:0;填充:0; ｝ 标题{ 背景:黄色; 身高:80 px; 位置:相对; ｝ .content { 最小高度:100 vh; 背景:粉色; Margin: -80px 0 -40px; 填充:80px 0 40px; box-sizing: border-box; ｝ 页脚{ 高度:40像素; 背景:水; ｝ <header>header goes here</header> <div class="content">Lorem ipsum < / div > <页脚> 这是我的页脚 < /页脚>