如何在css中将页脚粘贴到底部？答案

【问题标题】：How to stick a footer to bottom in css?如何在css中将页脚粘贴到底部？
【发布时间】：2010-12-02 02:14:49
【问题描述】：

我遇到了在浏览器底部定位页脚的经典问题。我尝试过包括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 中无法使用固定（仍然在浏览器中间显示页脚），仅适用于 FF。

【问题讨论】：

一模一样的stackoverflow.com/questions/42294/…
stackoverflow.com/search?q=css+footer
2019年很容易做到with flexbox

标签： css sticky-footer

【解决方案1】：

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

footer {
    position: fixed; 
    bottom: 0;
}

【讨论】：

【解决方案2】：

以下代码有效，来自 w3schools.com

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我同意 Luke Vo 的解决方案。我认为最好从 layout-wrapper 中省略 justify-content: space-between; 并将 margin-top: auto; 添加到页脚。

你不希望你的身体悬在中间，只将页脚推到底部。

这种方法处理超出视口的任何内容。

【讨论】：

我认为这应该是一条评论，因为它似乎不是独立的答案。

【解决方案5】：

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

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

【讨论】：

替换 'fixed' 为我工作，footer { position: fixed;高度：100px；顶部：计算（100vh - 100px）； }
使用 css 原生变量，例如。 --页脚高度：100px；使代码易于使用:)

【解决方案6】：

对于现代浏览器，您可以使用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;
}

演示：https://codepen.io/datvm/pen/vPWXOQ

【讨论】：

你写了正确的解决方案，你可以更新它as here explained

【解决方案7】：

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

【讨论】：

因为您所做的不是经典的粘页脚，它会粘在页面底部，并且如果页面在窗口底部 100% 可见。
没错，即使页面比折叠长，页脚也会开始覆盖部分内容，并且使用此方法始终保持可见
这是同一解决方案的一种扩展版本：stackoverflow.com/a/20114486/618649
但在平板电脑或 10 英寸笔记本电脑上，它甚至与折叠内容上方重叠。
我要补充一点，如果页脚嵌套在顶级组件中，那么这个顶级组件应该在相应的 css 文件中具有“位置：相对”属性，例如：.top {位置：相对； .footer{位置：绝对；底部：0px;}}

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

下面的css属性就可以了

position: fixed;

希望对你有所帮助。

【讨论】：

【解决方案10】：

这对我有用：

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}

【讨论】：

【解决方案11】：

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

附注示例：http://markbokil.com/code/bottomfooter/

【讨论】：

【解决方案12】：

如果使用“位置：固定；底部：0；”您的页脚将始终显示在底部，如果页面长于浏览器窗口，您的内容将隐藏。

【讨论】：

这确实工作得很好，而且比其他解决方案麻烦得多（尤其是如果你有一个可变高度的页脚），但明显的缺点是它使用 JS。

【解决方案13】：

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

为我工作

【讨论】：

【解决方案14】：

我在这个粘性页脚教程中遇到了类似的问题。如果没记错的话，您需要将表单标签放在 div class=Main /> 部分，因为表单标签本身会导致阵容出现问题。

【讨论】：

您能否详细说明您的解决方案可能是正确的，但我没有完全理解：将表单标签准确地放在哪里？
:: 看答案:: 看那个，它过滤掉了标签。更新了答案。这有意义吗？
Andrei 正在谈论粘性页脚，您正在实施的不是粘性页脚。

【解决方案15】：

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

无论您滚动到哪里，页脚都会停留在浏览器窗口的底部。

【讨论】：

这正是我想要的 ;)