如何在CSS中将页脚固定在底部？

Question

我遇到了一个经典问题，就是如何将页脚定位在浏览器的底部。我尝试了包括http://ryanfait.com/resources/footer-stick-to-bottom-of-page/在内的多种方法，但是都无法得到好的结果：在FF和IE中，我的页脚总是出现在浏览器窗口的中间。

在HTML中，我有这个简单的结构：

<form>
 ...
 <div class=Main />
 <div id=Footer />
</form>

这是与 CSS 底部问题相关的 CSS 代码：

    *
    {
        margin: 0;
    }


html, body
{
    height: 100%;
}


    #Footer
    {
        background-color: #004669;
        font-family: Tahoma, Arial;
        font-size: 0.7em;
        color: White;
        position: relative;
        height: 4em;
    }



    .Main
    {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;

        /*top: 50px;*/

        margin: 0 25% -4em 25%;

        font-family: Verdana, Arial, Tahoma, Times New Roman;
        font-size: 0.8em;
        word-spacing: 1px;
        line-height: 170%;
        /*padding-bottom: 40px;*/
    }

我到底做错了什么？我真的尝试了一切。如果我漏掉了任何有用的信息，请让我知道。提前感谢您的任何建议。

致敬，

---

谢谢大家的回答。 以下方法可行：

position:absolute;
    width:100%;
    bottom:0px;

在IE中，将位置设置为fixed没有起作用（页脚仍然显示在浏览器中间），只有在FF中起作用。

- Amc_rtty

---

请提供更多上下文信息，以便我能够准确翻译。 - Esteban Küber

http://stackoverflow.com/search?q=css+footer - Esteban Küber

在2019年，使用**flexbox**非常容易实现。 - Fabrizio Bertoglio

Answer 1

尝试将页脚样式设置为 position:absolute; 和 bottom:0;。

- Nick Larsen

---

因为你所做的不是经典的粘性页脚，它会固定在页面底部，即使页面向下滚动到窗口底部也始终如一。 - markus

没错，即使页面比折叠线还要长，页脚也会开始覆盖部分内容，并通过这种方式始终保持可见。 - Nick Larsen

这是同一解决方案的扩展版本：https://dev59.com/oXnZa4cB1Zd3GeqPo1YU#20114486 - Craig Tullis

但在平板电脑或10英寸的笔记本电脑上，它甚至会重叠在折叠内容之上。 - Ravinder Payal

我想补充一点，如果页脚嵌套在顶级组件中，则该顶级组件应在相应的CSS文件中具有属性“position：relative”，如下所示：.top {position: relative; .footer {position: absolute; bottom: 0px;}} - Vladimir

Answer 2

#Footer {
  position:fixed;
  bottom:0;
}

这将使页脚始终保持在浏览器窗口底部，无论你滚动到哪里。

- codedude

---

正是我正在寻找的 ;) - Aleks

你可能想要添加 width: 100%; 来使其全宽。 - Exodus Reed

Answer 3

#Footer {
position:fixed;
bottom:0;
width:100%;
}

对我有用

- Sheikh Naveed

Answer 4

我认为很多人正在寻找一个底部滚动而不是固定的页脚，称为粘性页脚。当高度太短时，固定的页脚将覆盖主体内容。您必须将html、body和页面容器设置为100%的高度，将页脚设置为绝对位置底部。您的页面内容容器需要相对位置才能正常工作。您的页脚具有负边距，等于页脚高度减去页面内容底部边距。

- mbokil

Answer 5

假设您知道页脚的大小，您可以这样做：

    footer {
        position: sticky;
        height: 100px;
        top: calc( 100vh - 100px );
    }

- ndvo

---

替换“fixed”对我有用，footer { position: absolute; height: 100px; bottom: 0; } - Mohammad Abraq

使用 CSS 原生变量，例如 --footer-height: 100px; 让代码易于使用 :) - procek

使用sticky而不是fixed，加1分。Sticky使页脚相对于其容器定位，而fixed则将页脚相对于视口定位。 - Vincent

Answer 6

#footer{
position: fixed; 
bottom: 0;
}

http://codepen.io/smarty_tech/pen/grzMZr

- Bhawna Malhotra

Answer 7

尝试使用 fixed 值的 position 属性将您的区块放置在固定位置。以下是将页脚放置在页面底部的代码。

footer {
    position: fixed; 
    bottom: 0;
}

- Codemaker

---

“position: fixed” 可能会重叠主要内容，而 “position: sticky” 会推动内容。 - Clemzd

Answer 8

如果您使用“position:fixed; bottom:0;”样式，您的页脚将始终显示在底部，并且如果页面比浏览器窗口更长，则会隐藏您的内容。

- Chtioui Malek

---

这确实很好用，比其他解决方案（特别是当你有一个可变高度的页脚）要少麻烦得多，但明显的缺点是它使用了JS。 - Synchro

Answer 9

所以来自 @nvdo 和 @Abdelhameed Mahmoud 的混合解决方案对我有用

footer {
    position: sticky;
    height: 100px;
    top: calc( 100vh - 100px );
}

- Mohammad Abraq

Answer 10

对于现代浏览器，您可以使用flex布局来确保页脚始终位于底部，无论内容长度如何（如果内容太长，底部也不会隐藏内容）。

HTML布局：

最初的回答：

<div class="layout-wrapper">
  <header>My header</header>
  <section class="page-content">My Main page content</section>
  <footer>My footer</footer>
</div>

CSS:

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

.layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.layout-wrapper > .page-content {
  background: cornflowerblue;
  color: white;
  padding: 20px;
}

.layout-wrapper > header, .layout-wrapper > footer {
  background: #C0C0C0;
  padding: 20px 0;
}

最初的回答：Demo: https://codepen.io/datvm/pen/vPWXOQ。

- Luke Vo

---

你已经写出了正确的解决方案，可以按照这里的说明进行更新：https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3 - Fabrizio Bertoglio