如何让页脚保持在网页的底部?

I have a simple 2-column layout with a footer that clears both the right and left div in my markup. My problem is that I can't get the footer to stay at the bottom of the page in all browsers. It works if the content pushes the footer down, but that's not always the case.

我有一个简单的2列布局，带有一个页脚，可以清除我标记中的右div和左div。我的问题是，在所有浏览器中，我无法让页脚保持在页面的底部。如果内容将页脚往下推，它就会工作，但情况并非总是如此。

Update:

It's not working properly in Firefox. I'm seeing a strip of background color below the footer when there's not enough content on the page to push the footer all the way down to the bottom of the browser window. Unfortunately, this is the default state of the page.

它在Firefox中不能正常工作。当页面上没有足够的内容来将页脚推到浏览器窗口的底部时，我看到页脚下面有一条背景色条。不幸的是，这是页面的默认状态。

21 个解决方案

#1

To get a sticky footer:

要得到粘性的页脚:

1. Have a <div> with class="wrapper" for your content.

   有一个

   和class="wrapper"为你的内容。

2. Right before the closing </div> of the wrapper place the <div class="push"></div>.

   在包装器的关闭之前，放置

   。

3. Right after the closing </div> of the wrapper place the <div class="footer"></div>.

   在包装器的关闭之后，

   。

* {
    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 */
}

#2

Use CSS vh units!

Probably the most obvious and non-hacky way to go about a sticky footer would be to make use of the new css viewport units.

也许最明显、最不陈腐的方法是使用新的css viewport单元。

Take for example the following simple markup:

以以下简单的标记为例:

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

If the header is say 80px high and the footer is 40px high, then we can make our sticky footer with one single rule on the content div:

如果页眉是80px高，页脚是40px高，那么我们就可以用内容div的一条规则来制作我们的粘性页脚:

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

Which means: let the height of the content div be at least 100% of the viewport height minus the combined heights of the header and footer.

这意味着:让content div的高度至少是viewport高度的100%减去页眉和页脚的合并高度。

That's it.

就是这样。

* {
    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">This page has little content</div>
<footer>This is my footer</footer>

... and here's how the same code works with lots of content in the content div:

…下面是同样的代码如何处理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) The height of the header and footer must be known

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

2) Old versions of IE (IE8-) and Android (4.4-) don't support viewport units. (caniuse)

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

3) Once upon a time webkit had a problem with viewport units within a calc rule. This has indeed been fixed (see here) so there's no problem there. However if you're looking to avoid using calc for some reason you can get around that using negative margins and padding with box-sizing -

3)曾经有一次webkit在calc规则中遇到了viewport单元的问题。这个已经被修复了(见这里)，所以没有问题。但是，如果您想避免使用calc，出于某些原因，您可以使用负边距和填充框大小-

Like so:

像这样:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

#3

Sticky footer with display: flex

Solution inspired by Philip Walton's sticky footer.

这一解决方案的灵感来自于菲利普·沃尔顿(Philip Walton)的粘脚。

Explanation

This solution is valid only for:

本方案仅适用于:

• Chrome ≥ 21.0
• Chrome≥21.0
• Firefox ≥ 20.0
• Firefox≥20.0
• Internet Explorer ≥ 10
• Internet Explorer≥10
• Safari ≥ 6.1
• Safari≥6.1

It is based on the flex display, leveraging the flex-grow property, which allows an element to grow in either height or width (when the flow-direction is set to either column or row respectively), to occupy the extra space in the container.

它基于flex显示，利用flex-grow属性，允许元素在高度或宽度上增长(当流方向分别设置为列或行)，以占据容器中的额外空间。

We are going to leverage also the vh unit, where 1vh is defined as:

我们还将利用vh单元，其中1vh定义为:

1/100th of the height of the viewport

观景台高度的百分之一

Therefore a height of 100vh it's a concise way to tell an element to span the full viewport's height.

因此，一个100vh的高度是一个简洁的方式来告诉一个元素跨越整个viewport的高度。

This is how you would structure your web page:

这就是你如何组织你的网页:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

In order to have the footer stick to the bottom of the page, you want the space between the body and the footer to grow as much as it takes to push the footer at the bottom of the page.

为了让页脚粘在页面的底部，您希望正文和页脚之间的空间能够像在页面底部推动页脚一样增长。

Therefore our layout becomes:

因此我们的布局就变成:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

Implementation

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

You can play with it at the JSFiddle.

你可以在JSFiddle玩它。

Safari quirks

Be aware that Safari has a flawed implementation of the flex-shrink property, which allows items to shrink more than the minimum height that would be required to display the content. To fix this issue you will have to set the flex-shrink property explicitly to 0 to the .content and the footer in the above example:

请注意，Safari有一个flex-shrink属性的缺陷实现，它允许条目缩小超过显示内容所需的最小高度。要解决这个问题，您必须将flex-shrink属性显式设置为0到上面示例中的.content和页脚:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

#4

You could use position: absolute following to put the footer at the bottom of the page, but then make sure your 2 columns have the appropriate margin-bottom so that they never get occluded by the footer.

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

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

#5

Set the CSS for the #footer to:

将#页脚的CSS设置为:

position: absolute;
bottom: 0;

You will then need to add a padding or margin to the bottom of your #sidebar and #content to match the height of #footer or when they overlap, the #footer will cover them.

然后，您需要在#侧栏和#content的底部添加一个填充或空白，以匹配#footer的高度，或者当它们重叠时，#footer将覆盖它们。

Also, if I remember correctly, IE6 has a problem with the bottom: 0 CSS. You might have to use a JS solution for IE6 (if you care about IE6 that is).

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

#6

Here is a solution with jQuery that works like a charm. It checks if the height of the window is greater than the height of the body. If it is, then it changes the margin-top of the footer to compensate. Tested it in Firefox, Chrome, Safari and Opera.

下面是一个使用jQuery的解决方案，它的工作方式很有魅力。它检查窗口的高度是否大于身体的高度。如果是，那么它将更改页脚的页边距以进行补偿。在Firefox、Chrome、Safari和Opera中进行了测试。

$( function () {

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

});

If your footer already has a margin-top (of 50 pixels, for example) you will need to change the last part for:

如果你的页脚已经有一个页边距(例如，50像素)，你需要为:

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

#7

Use absolute positioning and z-index to create a sticky footer div at any resolution using the following steps:

使用绝对定位和z-index在任何分辨率下创建一个粘性页脚div，使用以下步骤:

• Create a footer div with position: absolute; bottom: 0; and the desired height
• 创建一个页脚div，位置:绝对;底部:0;和所需的高度
• Set the padding of the footer to add whitespace between the content bottom and the window bottom
• 设置页脚的填充以在内容底部和窗口底部之间添加空格
• Create a container div that wraps the body content with position: relative; min-height: 100%;
• 创建一个容器div，该div将主体内容包装为位置:相对;最小高度:100%;
• Add bottom padding to the main content div that is equal to the height plus padding of the footer
• 向主内容div添加底部填充，它等于页脚的高度和填充
• Set the z-index of the footer greater than the container div if the footer is clipped
• 如果页脚被剪切，则设置页脚的z索引大于容器div

Here is an example:

这是一个例子:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

#8

A similar solution to @gcedo but without the need of adding an intermediate content in order to push the footer down. We can simply add margin-top:auto to the footer and it will be pushed to the bottom of the page regardless his height or the height of the content above.

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}

<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

#9

Try putting a container div (with overflow:auto) around the content and sidebar.

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

If that doesn't work, do you have any screenshots or example links where the footer isn't displayed properly?

如果这不起作用，您是否有没有显示页脚的屏幕截图或示例链接?

#10

One solution would be to set the min-height for the boxes. Unfortunately it seems that it's not well supported by IE (surprise).

一种解决方案是设置盒子的最小高度。不幸的是，它似乎没有得到IE的良好支持。

#11

None of these pure css solutions work properly with dynamically resizing content (at least on firefox and Safari) e.g., if you have a background set on the container div, the page and then resize (adding a few rows) table inside the div, the table can stick out of the bottom of the styled area, i.e., you can have half the table in white on black theme and half the table complete white because both the font-color and background color is white. It's basically unfixable with themeroller pages.

这些纯css解决方案与动态调整的内容正常工作(至少在firefox和Safari)例如,如果你有一个背景设置在容器div,页面,然后调整(添加几行)表内的div,表可以伸出的风格的底部区域,即。，在黑色主题上，你可以有一半的桌子是白色的，一半的桌子是完全白色的，因为字体颜色和背景颜色都是白色的。它基本上是不可修复的，因为有更多的页面。

Nested div multi-column layout is an ugly hack and the 100% min-height body/container div for sticking footer is an uglier hack.

嵌套的div多列布局是一种丑陋的设计，而用于粘贴页脚的100%最小的body/container div则是一种更丑陋的设计。

The only none-script solution that works on all the browsers I've tried: a much simpler/shorter table with thead (for header)/tfoot (for footer)/tbody (td's for any number of columns) and 100% height. But this have perceived semantic and SEO disadvantages (tfoot must appear before tbody. ARIA roles may help decent search engines though).

在我尝试过的所有浏览器上，唯一的非脚本解决方案是:一个更简单/更短的表，包含thead(用于页眉)/tfoot(用于页脚)/tbody(用于任何数量的列)和100%的高度。但这已经察觉到语义和SEO的缺点(tfoot必须出现在tbody之前)。不过，ARIA角色可能有助于优秀的搜索引擎)。

#12

CSS :

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

This should do the trick if you are looking for a responsive footer aligned at the bottom of the page,which always keeps a top-margin of 80% of the viewport height.

如果你想要在页面底部对齐一个有响应的页脚，这应该可以做到这一点，因为它总是保持在80%的viewport高度上。

#13

For this question many of the answers I have seen are clunky, hard to implement and inefficient so I thought I'd take a shot at it and come up with my own solution which is just a tiny bit of css and html

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

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}

<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

this works by setting the height of the footer and then using css calc to work out the minimum height the page can be with the footer still at the bottom, hope this helps some people :)

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

#14

I have myself struggled with this sometimes and I always found that the solution with all those div's within each other was a messy solution. I just messed around with it a bit, and I personally found out that this works and it certainly is one of the simplest ways:

我自己有时也在纠结这个问题，我总是发现所有这些div在一起的解决方案是一个混乱的解决方案。我只是把它弄乱了一点，我个人发现这个方法是有效的，它当然是最简单的方法之一:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

What I like about this is that no extra HTML needs to be applied. You can simply add this CSS and then write your HTML as whenever

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

#15

Multiple people have put the answer to this simple problem up here, but I have one thing to add, considering how frustrated I was until I figured out what I was doing wrong.

很多人都给出了这个简单问题的答案，但我还有一件事要补充，考虑到我是多么的沮丧，直到我发现我做错了什么。

As mentioned the most straightforward way to do this is like so..

正如前面提到的，最直接的方法是这样的。

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

However the property not mentioned in posts, presumably because it is usually default, is the position: static on the body tag. Position relative will not work!

但是post中没有提到的属性(可能是因为它通常是默认的)是位置:body标记上的静态属性。职位亲属将不会工作!

My wordpress theme had overridden the default body display and it confused me for an obnoxiously long time.

我的wordpress主题覆盖了默认的身体显示，它让我困惑了很长时间。

#16

An old thread I know, but if you are looking for a responsive solution, this jQuery addition will help:

我知道一个旧的线程，但是如果您正在寻找一个响应性的解决方案，这个jQuery添加将会有帮助:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

Full guide can be found here: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

完整的指南可以在这里找到:https://pixeldesigns.co.uk/blog/responsibility - jquer-sticky -footer/

#17

I have created a very simple library https://github.com/ravinderpayal/FooterJS

我创建了一个非常简单的库https://github.com/ravinderpayal/FooterJS

It is very simple in use. After including library, just call this line of code.

它使用起来很简单。包含库之后，只需调用这行代码。

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

Footers can be dynamically changed by recalling above function with different parameter/id.

可以通过使用不同的参数/id来调用上述函数来动态地更改页脚。

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

Note:- You haven't to alter or add any CSS. Library is dynamic which implies that even if screen is resized after loading page it will reset the position of footer. I have created this library, because CSS solves the problem for a while but when size of display changes significantly,from desktop to tablet or vice versa, they either overlap the content or they no longer remains sticky.

注意:-您没有修改或添加任何CSS。库是动态的，这意味着即使在加载页面之后屏幕被重新调整大小，它也会重置页脚的位置。我创建了这个库，因为CSS解决了这个问题一段时间，但是当显示的大小发生显著变化时，无论是桌面还是平板，它们要么重叠内容，要么不再具有粘性。

Another solution is CSS Media Queries, but you have to manually write different CSS styles for different size of screens while this library does its work automatically and is supported by all basic JavaScript supporting browser.

另一种解决方案是CSS媒体查询，但是您必须为不同大小的屏幕手动编写不同的CSS样式，而这个库是自动工作的，并且所有支持JavaScript的基本浏览器都支持该库。

Edit CSS solution:

编辑CSS解决方案:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

Now, if the height of display is more than your content length, we will make footer fixed to bottom and if not, it will automatically appear in very end of display as you need to scroll to view this.

现在，如果显示的高度超过了内容长度，我们将把页脚固定在底部，如果不是，它将自动出现在显示的最后，因为您需要滚动查看。

And, it seems a better solution than JavaScript/library one.

而且，它似乎是比JavaScript/库更好的解决方案。

#18

I wasn't having any luck with the solutions suggested on this page before but then finally, this little trick worked. I'll include it as another possible solution.

我以前对这一页上的解决方案不太满意，但最后，这个小技巧奏效了。我将把它作为另一种可能的解决方案。

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

#19

Flexbox solution

Flex layout is preferred for natural header and footer heights. This flex solution is tested in modern browsers and actually works :) in IE11.

灵活的布局是首选的自然页眉和页脚高度。这个flex解决方案在现代浏览器中进行了测试，实际上可以在IE11中使用:)。

See JS Fiddle.

看到JS小提琴。

HTML

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  

CSS

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

#20

For me the nicest way of displaying it (the footer) is sticking to the bottom but not covering content all the time:

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

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

#21

jQuery CROSS BROWSER CUSTOM PLUGIN - $.footerBottom()

jQuery跨浏览器自定义插件- $.footerBottom()

Or use jQuery like I do, and set your footer height to auto or to fix, whatever you like, it will work anyway. this plugin uses jQuery selectors so to make it work, you will have to include the jQuery library to your file.

或者像我一样使用jQuery，设置你的页脚高度为auto或fix，不管你喜欢什么，它都可以工作。这个插件使用jQuery选择器，因此要使它工作，您必须将jQuery库包含到您的文件中。

Here is how you run the plugin. Import jQuery, copy the code of this custom jQuery plugin and import it after importing jQuery! It is very simple and basic, but important.

下面是如何运行插件的。导入jQuery，复制这个自定义jQuery插件的代码，并在导入jQuery之后导入它!它非常简单、基本，但很重要。

When you do it, all you have to do is run this code:

当你这样做的时候，你所要做的就是运行以下代码:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

there is no need to place it inside the document ready event. It will run well as it is. It will recalculate the position of your footer when the page is loaded and when the window get resized.

不需要将它放在document ready事件中。它会运行得很好。它将重新计算页面加载时和窗口调整大小时页脚的位置。

Here is the code of the plugin which you do not have to understand. Just know how to implement it. It does the job for you. However, if you like to know how it works, just look through the code. I left comments for you.

这是插件的代码，你不需要去理解它。只需要知道如何实现它。它对你很有用。但是，如果您想了解它是如何工作的，只需查看代码。我给你留下了评论。

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5

/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>