设置#页脚的CSS为:

position: absolute;
bottom: 0;

然后，您需要在#边栏和#内容的底部添加填充或边距，以匹配#footer的高度，或者当它们重叠时，#footer将覆盖它们。

此外，如果我没记错的话，IE6在底部有一个问题:0 CSS。你可能不得不为IE6使用JS解决方案(如果你关心IE6的话)。

对于这个问题，我看到的许多答案都是笨拙的，难以实现和低效的，所以我想我应该尝试一下，并提出我自己的解决方案，只是一点点css和html

超文本标记语言 身体{ 高度:100%; 保证金:0; ｝ .body { Min-height: calc(100% - 2rem); 宽度:100%; 背景颜色:灰色; ｝ .footer { 高度:2快速眼动; 宽度:100%; 背景颜色:黄色; ｝ 身体< > <div class="body">test as body</div> <div class="footer">test as footer</div> 身体< / >

这是通过设置页脚的高度，然后使用CSS计算出页面的最小高度，页脚仍然在底部，希望这有助于一些人:)

使用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 > <页脚> 这是我的页脚 < /页脚>

react友好的解决方案-(不需要分隔符div)

Chris coyer(值得尊敬的CSS-Tricks网站)在sticky - footer上保持了最新的页面，现在至少有五种创建sticky footer的方法，包括使用FlexBox和CSS-Grid。

为什么这很重要?因为，对我来说，我多年来使用的早期/旧方法对React不起作用——我不得不使用Chris的flexbox解决方案——这很简单，也很有效。

下面是他的CSS-Tricks flexbox粘性页脚-看看下面的代码，它不可能更简单。

(下面的StackSnippet示例没有完美地呈现示例的底部。页脚会延伸到屏幕底部，这在现实生活中是不会发生的。)

html,身体{高度:100%;} 身体{显示:flex;flex-direction:列;} .content {flex: 1 0 auto;} /* flex:增长/收缩/伸缩基础;* / .footer {flex-shrink: 0;} /* ----以下仅为演示---- */ .footer{背景:苍绿色;} 身体< > <div class="content">Page content - height扩展到填充空间</div> <footer class="footer"> footer Content</footer> . 身体< / >

Chris还为那些喜欢网格的人演示了这个CSS-Grid解决方案。

引用:

CSS-Tricks - Flexbox的完整指南

div.fixed { 位置:固定; 底部:0; 右:0; 宽度:100%; 边框:3px实体#73AD21; ｝ <身体风格= "高度:1500 px”> < h2 >:固定;< / h2 > <p>一个位置为固定的元素;相对于视口的位置，这意味着即使页面被滚动，它也始终保持在相同的位置:</p> < div class = "固定" > 这个div元素的位置为:fixed; < / div > 身体< / >

对我来说，最好的显示它(页脚)的方式是粘在底部，但不覆盖所有的内容:

#my_footer {
    position: static
    fixed; bottom: 0
}