67

我在浏览器底部定位页脚时遇到了经典问题。我已经尝试过包括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。

4

15 回答 15

59

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

于 2009-09-28T18:28:41.033 回答
46 
#Footer {
  position:fixed;
  bottom:0;
}

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

于 2009-09-28T18:27:02.103 回答
14 
#Footer {
position:fixed;
bottom:0;
width:100%;
}

为我工作

于 2011-11-11T23:58:41.547 回答
5

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

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

于 2014-02-24T03:03:10.527 回答
5 
#footer{
position: fixed; 
bottom: 0;
}

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

于 2016-04-16T05:54:16.997 回答
4

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

    footer {
        position: sticky;
        height: 100px;
        top: calc( 100vh - 100px );
    }
于 2020-07-18T19:23:43.280 回答
2

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

于 2019-03-12T16:55:50.440 回答
2

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

footer {
    position: sticky;
    height: 100px;
    top: calc( 100vh - 100px );
}
于 2020-12-15T22:34:08.877 回答
1

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

于 2012-04-04T15:50:05.557 回答
1

这对我有用：

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}
于 2014-04-22T06:08:43.763 回答
1

以下css属性将执行此操作

position: fixed;

我希望这会有所帮助。

于 2014-10-08T17:42:56.707 回答
1

尝试position带有值的属性，fixed以将您的划分置于固定位置。以下是将页脚放在页面底部的代码。

footer {
    position: fixed; 
    bottom: 0;
}
于 2021-09-26T17:34:52.070 回答
0

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

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

这种方法解决了超出视口的任何内容。

于 2020-10-05T08:55:42.293 回答
0

以下代码有效，来自 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>
于 2021-08-21T14:27:23.343 回答
-1

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

于 2009-09-28T18:27:47.260 回答