`display: flex`

Question

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

更新

它在Firefox中无法正常运行。当页面上没有足够的内容将页脚一直向下推到浏览器窗口的底部时，我在页脚下方看到一条背景颜色。不幸的是，这是页面的默认状态。

Answer 1

要获得粘性页脚：

为您的内容提供<div> class="wrapper"。
在</div>的结束wrapper之前 之前 <div class="push"></div>。

在</div>的结束wrapper之后 <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 */ }

Answer 2

使用CSS vh单位！

关于粘性页脚的最明显和非黑客的方法可能是使用新的css viewport units。

以下面的简单标记为例：

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

如果标题高80px且页脚高40px，那么我们可以在内容div上使用单个规则制作粘性页脚：

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

这意味着：让内容div的高度至少视口高度的100％减去页眉和页脚的组合高度。

就是这样。

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

...以下是相同的代码如何与内容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在计算规则中的视口单元出现问题。这确实已得到修复（see here）所以那里没有问题。但是，如果您因某种原因希望避免使用calc，则可以使用负边距和使用框大小填充来解决这个问题 -

像这样：

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

Answer 3

`display: flex`

的粘性页脚

受Philip Walton's sticky footer启发的解决方案。

说明

此解决方案为valid only for：

Chrome≥21.0
Firefox≥20.0
InternetExplorer≥10
Safari≥6.1

它基于flex display，利用flex-grow属性，允许高度或中的元素成长宽度（当flow-direction分别设置为column或row时），占用容器中的额外空间。

我们还将利用vh单位，其中1vh为defined as：

视口高度的1/100

因此100vh的高度是告诉元素跨越整个视口高度的简洁方法。

这是您构建网页的方式：

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

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

为了让页脚粘到页面底部，您希望主体和页脚之间的空间增长到将页脚推到页面底部所需的数量。

因此我们的布局变为：

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

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

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

实施

＆＃13;

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;
}

＆＃13;

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

＆＃13;

您可以在the JSFiddle播放。

Safari怪癖

请注意，Safari有一个flawed implementation of the flex-shrink property，它允许项目缩小超过显示内容所需的最小高度。要解决此问题，您必须将flex-shrink属性明确设置为0到上面示例中的.content和footer：

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

Answer 4

您可以使用position: absolute将页脚放在页面底部，但请确保您的2列具有相应的margin-bottom，以便它们永远不会被页脚遮挡。

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

Answer 5

这是一个jQuery的解决方案，就像魅力一样。它检查窗口的高度是否大于身体的高度。如果是，那么它会更改页脚的页边距以进行补偿。在Firefox，Chrome，Safari和Opera中测试过。

$( function () {

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

});

如果你的页脚已经有一个margin-top（例如50像素），你需要更改最后一部分：

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

Answer 6

将#footer的CSS设置为：

position: absolute;
bottom: 0;

然后，您需要在padding和margin的底部添加#sidebar或#content以匹配#footer的高度或重叠，#footer将覆盖它们。

另外，如果我没记错的话，IE6的bottom: 0 CSS有问题。您可能必须使用IE6的JS解决方案（如果您关心的是IE6）。

Answer 7

与@gcedo类似的解决方案，但不需要添加中间内容以便向下推动页脚。我们可以简单地将margin-top: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>

Answer 8

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

使用position: absolute; bottom: 0;和所需高度
设置页脚的填充以在内容底部和窗口底部之间添加空格
使用div

position: relative; min-height: 100%;

将底部填充添加到主内容div，该内容等于页脚的高度加填充
如果页脚被剪裁，则将页脚的z-index设置为大于容器div

以下是一个例子：

    <!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>

Answer 9

尝试在内容和侧边栏周围放置一个容器div（带溢出：自动）。

如果这不起作用，你有没有正确显示页脚的截图或示例链接？

Answer 10

我自己有时会遇到这种情况，我总是发现所有这些div的解决方案都是一个混乱的解决方案。我只是搞砸了一下，我个人发现这有效，它肯定是最简单的方法之一：

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

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

时编写HTML

Answer 11

对于这个问题，我看到的许多答案都很笨重，难以实现和效率低下，所以我想我会对它进行拍摄并提出我自己的解决方案，这只是一点点css和HTML

＆＃13;

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;
}

＆＃13;

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

＆＃13;

这可以通过设置页脚的高度，然后使用css calc来计算页面最小高度，页脚仍在底部，希望这有助于一些人：）

Answer 12

CSS：

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

HTML：

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

如果您正在寻找在页面底部对齐的响应页脚，这应该可以解决问题，该页脚始终保持视口高度的80％的上边距。

Answer 13

这些纯css解决方案都没有适当地动态调整内容大小（至少在firefox和Safari上），例如，如果你在容器div上设置了背景，那么页面然后调整大小（添加几行）表div，桌子可以伸出风格区域的底部，也就是说，你可以将一半的桌子放在白色的黑色主题上，一半的桌子是白色的，因为字体颜色和背景颜色都是白色。它对于整个页面来说基本上是不可修复的。

嵌套的div多列布局是一个丑陋的黑客，100％最小高度的身体/容器div用于粘贴页脚是一个丑陋的黑客。

唯一适用于我尝试过的所有浏览器的无脚本解决方案：一个更简单/更简短的表，其中包含thead（用于标题）/ tfoot（用于页脚）/ tbody（td用于任意数量的列）和100 ％高度。但这已经感知到语义和搜索引擎优化的缺点（tfoot必须出现在tbody之前。尽管ARIA角色可能有助于体面的搜索引擎）。

Answer 14

一种解决方案是设置盒子的最小高度。不幸的是，似乎it's not well supported by IE（惊讶）。

Answer 15

刚刚发明了一个非常简单的解决方案，对我来说效果很好。您只需将除页脚之外的所有页面内容都包装在一个 div 中，然后将 min-height 设置为视点的 100% 减去页脚的高度。无需在页脚或多个包装 div 上进行绝对定位。

.page-body {min-height: calc(100vh - 400px);} /*Replace 400px with your footer height*/

Answer 16

查看http://1linelayouts.glitch.me/，示例 4。Una Kravets 解决了这个问题。

这将创建一个带有页眉、主页和页脚的 3 层页面。

-您的页脚将始终位于底部，并使用空间来适应内容；

-您的标题将始终位于顶部，并使用空间来适应内容；

-如果需要，您的 main 将始终使用所有可用的剩余空间（剩余空间的一部分），足以填满屏幕。

HTML

<div class="parent">
  <header class="blue section" contenteditable>Header</header>
  <main class="coral section" contenteditable>Main</main>
  <footer class="purple section" contenteditable>Footer Content</footer>
</div>

CSS

.parent {
  display: grid;
  height: 95vh; /* no scroll bars if few content */
  grid-template-rows: auto 1fr auto;
}

Answer 17

REACT友好的解决方案-（无需间隔器div）

Chris Coyier（古老的CSS-Tricks网站）保持了page on the Sticky-Footer的最新状态，现在至少有五种方法来创建粘性页脚，包括使用FlexBox和CSS-Grid。

为什么这很重要？因为对我来说，我使用多年的较早/较旧的方法不适用于React-我必须使用Chris的flexbox解决方案-这是简单和工作。

下面是他的CSS-Tricks flexbox Sticky Footer-只看下面的代码，它不可能更简单。

（（下面的）StackSnippet示例不能完美呈现示例的底部。显示的页脚超出了屏幕底部，这在现实生活中是不会发生的。）

html,body{height: 100%;}
body     {display:flex; flex-direction:column;}
.content {flex: 1 0 auto;} /* flex: grow / shrink / flex-basis; */
.footer  {flex-shrink: 0;}

/* ---- BELOW IS ONLY for demo ---- */
.footer{background: palegreen;}

<body>
  <div class="content">Page Content - height expands to fill space</div>
  <footer class="footer">Footer Content</footer>
</body>

Chris还向喜欢网格的人演示了CSS-Grid solution。

参考文献：

CSS-Tricks - A Complete Guide to Flexbox

Answer 18

index.html：

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css：

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

来源：https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

Answer 19

如果您不希望使用固定位置，并且讨厌在手机上关注您，那么到目前为止，这似乎对我有用。

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

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

只需将html设置为min-height: 100%;和position: relative;，然后在页脚上设置position: absolute; bottom: 0; left: 0;。然后，我确保页脚是体内的最后一个元素。

让我知道这是否对其他任何人无效，为什么。我知道这些乏味的风格骇客会在我没有想到的各种情况下表现异常。

Answer 20

诀窍是固定页脚的位置，同时将底部设置为0。最简单的解决方案是：

  footer {
        ...
        width: 100%;
        position: fixed;
        left:0;
        bottom: 0;
    }

在这里看到这个完整的简单示例：

        body {
            background-color: #ccc;
            margin: 0;
        }

        main {
            width: 85%;
            margin: auto;
            background-color: bisque;
        }

        main h1 {
            text-align: center;
        }

        article p {
            padding: 5px 50px 5px 50px;
        }

        footer {
            background-color: black;
            width: 100%;
            height: 50px;
            text-align: center;
            position: fixed;
            bottom: 0;
        }

        footer p {
            color: white;
            font-size: 20px;
        }

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <main>
        <section>
            <article>
                <header>
                    <h1>Know me better!</h1>
                </header>
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit quis et minima similique accusamus
                    est error eos culpa quos natus maxime, dolorem quam voluptatibus quo quod velit neque iste non.
                    Consequatur provident pariatur, similique aut velit libero quasi, laudantium magnam, eos laborum
                    expedita quos voluptas impedit labore veniam. Neque maiores aperiam soluta quis nobis ipsum hic
                    tempore porro optio ad.
                </p>
            </article>
        </section>
    </main>
    <footer>
        <p>Copyrighting 2019.</p>
    </footer>
</body>

</html>

Answer 21

在我的网站上我总是使用：

position: fixed;

...在我的 CSS 中作为页脚。这将其锚定到页面底部。

Answer 22

      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        border: 3px solid #73AD21;
      }

  <body style="height:1500px">

    <h2>position: fixed;</h2>

    <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

    <div class="fixed">
      This div element has position: fixed;
    </div>

  </body>

Answer 23

由于尚未提出Grid解决方案，因此，如果我们采用{，则只有两个声明用于父元素。 {1}}和height: 100%是理所当然的：

margin: 0

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}

align-content: space-between

项目沿着对齐容器均匀地分布在横轴。每对相邻项目之间的间距是相同。第一项与主开始边缘齐平，最后一项与主开始边缘齐平项与主边缘齐平。

Answer 24

flex解决方案对我来说可以使页脚变粘，但不幸的是，更改正文以使用flex布局使我们的某些页面布局发生了变化，而且效果不佳。最终对我有用的是：

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

我是从ctf0在https://css-tricks.com/couple-takes-sticky-footer/的回复中得到的

Answer 25

对我来说，最好的显示方式（页脚）是贴在底部但不是一直覆盖内容：

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

Answer 26

Flexbox解决方案

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

See JS Fiddle

<强> HTML

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

<强> 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;
}

Answer 27

我之前在这个页面上建议的解决方案没有运气，但最后，这个小技巧起作用了。我将其作为另一种可能的解决方案。

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

Answer 28

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

使用非常简单。包含库之后，只需调用这行代码即可。

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

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

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

注意： - 您不得更改或添加任何CSS。库是动态的，这意味着即使屏幕在加载页面后调整大小，它也会重置页脚的位置。我创建了这个库，因为CSS解决了一段时间的问题，但是当显示器的大小发生显着变化时，从桌面到平板电脑，反之亦然，它们要么重叠内容，要么不再保持粘性。

另一种解决方案是CSS媒体查询，但您必须为不同大小的屏幕手动编写不同的CSS样式，而此库会自动运行，并受所有基本JavaScript支持浏览器的支持。

修改 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; } }

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

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

Answer 29

我知道一个旧线程，但如果您正在寻找一个响应式解决方案，这个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});
}

完整指南可在此处找到：https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Answer 30

jQuery CROSS BROWSER CUSTOM PLUGIN - $ .footerBottom（）

或者像我一样使用jQuery，并将页脚高度设置为auto或fix，无论你喜欢什么，它都可以正常工作。这个插件使用jQuery选择器，所以为了使它工作，你必须将jQuery库包含到你的文件中。

以下是运行插件的方法。导入jQuery，复制这个自定义jQuery插件的代码，并在导入jQuery后导入它！它非常简单和基本，但很重要。

当你这样做时，你所要做的就是运行这段代码：

$.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"}

无需将其放在文档就绪事件中。它会运行良好。当页面加载时以及窗口调整大小时，它将重新计算页脚的位置。

以下是您不必了解的插件代码。只知道如何实现它。它为你完成了这项工作。但是，如果您想知道它是如何工作的，只需查看代码即可。我给你发了评。

//import jQuery library before this script

＆＃13;

// 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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 31

多人已经在这里解决了这个简单的问题，但我有一件事要补充，考虑到我有多沮丧，直到我弄清楚我做错了什么。

如上所述，最简单的方法就是这样......

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;
}

然而，帖子中未提及的属性（可能是因为它通常是默认值）是body标签上的 position：static 。职位相对不起作用！

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

如何让页脚停留在网页的底部？

更新

31 个答案:

使用CSS vh单位！

`display: flex`

说明

实施

Safari怪癖

HTML

CSS

REACT友好的解决方案-（无需间隔器div）

参考文献：

Flexbox解决方案