logo标签列表

将网页底部固定在底部（如果需要滚动则允许滚动）

htmlcssfooter
22

我想在页面底部显示页脚。如果页面超过一个屏幕，我希望页脚只在滚动到底部时显示。因此，我不能使用“position: fixed”，因为它会始终显示。

我正在尝试复制以下示例：http://peterned.home.xs4all.nl/examples/csslayout1.html

但是当我使用以下代码时，页脚在我的长页面上半途显示。

position: absolute; bottom:0

我有短页面和长页面，希望页脚能够在它们的底部。

如何在长页面上也将页脚保持在底部?

Fiddle

我已经创建了这些 Fiddles 来展示问题并测试代码。请使用您的解决方案发布一个工作示例。

我的页脚 CSS：

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

.content {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

/* --- Footer --- */
.footerbar {                                position: absolute;
                                            width: 100%;
                                            bottom: 0;

                                            color: white;
                                            background-color: #202020;
                                            font-size: 12px; }

a.nav-footer:link,
a.nav-footer:visited {                      color: white !important; }
a.nav-footer:hover, 
a.nav-footer:focus {                        color: black !important;
                                            background-color: #E7E7E7 !important; }
9个回答
22
Ryan Fait粘性页脚的更新链接：https://codepen.io/griffininsight/pen/OMexrW - Aaron Hoffman
这个方法对我很有效，但页面并不总是“可滚动的”。 - tryptofame
即使在2019年末，这仍是一个很棒的解决方案！没有flex和其他好用的功能。谢谢！ - nlavr
根据示例，@tryptofame并不总是可滚动的。 - nlavr
7

再次强调，使用 flexbox 可以轻松解决问题：flex-grow。

首先，我们来看代码：

div#container {
  /* The power of flexboxes! */
  display: flex;
  display: -webkit-flex;
  flex-direction: column;

  min-height: 100vh;
}

div#container div#content {
  /* Key part: Eat the remaining space! */
  flex-grow: 1;
}

div#container footer {
  flex-basis: 100px;
}



/* Appearance, not important */
body {
  margin: 0;
  font-family: Fira Code;
}

@keyframes changeHeight {
  0% {height: 30px}
  10% {height: 30px}
  50% {height: 400px}
  60% {height: 400px}
  100% {height: 30px}
}

div, footer {
  color: white;
  text-align: center;
}

div#content section {
  background-color: blue;
  animation: changeHeight 10s infinite linear;
}

footer {
  background-color: indigo;
}
<div id="container">
  <div id="content">
    <!-- All other contents here -->
    <section>Main content</section>
  </div>
  <footer>
    Footer
    <!-- Footer content -->
  </footer>
</div>

如果 #content 的内容无法到达页脚，那么 flex-grow 属性会将该元素扩展以适应剩余的空间，因为 #container 的最小高度是视口高度 100vh。显然，如果 #content 和页脚的高度超过视口高度，则 #container 将可滚动。这样，页脚始终保持在页面底部。
此段代码中的动画属于 #content 内部的示例部分，旨在向您展示相同的效果：其高度在 30px 和 400px 之间变化（如果需要，可以将值增大）。
另外，为了提供更多信息，请参阅flex-basis和height（或width）之间的区别。
提示：在 CSS3 中，如果某些东西无法正常工作，请查看 flexbox 和 grid。它们通常提供简洁的解决方案。
希望对您有所帮助。
1
这应该在顶部。Flexbox确实提供了干净的解决方案+1 - Mohammad Faisal
5

将高度替换为overflow:auto;并给body添加一个position属性。

html,body {
    position:relative; <!--Also give it a position -->
    margin:0;
    padding:0;
    overflow:auto; <!-- HERE -->
}

将页脚相对于页面进行定位

/* --- Footer --- */
.footerbar { 
    position: relative; <!-- HERE -->
    width: 100%;
    bottom: 0;
    color: white;
    background-color: #202020;
    font-size: 12px; 
}

如果可能的话，最好使用相对位置来定位元素，特别是主要元素，比如这种情况下的页脚。

简短页面编辑

min-height:400px; <!-- Give this a real number like 400px 
                  or whatever you want...dont leave it to 100% as -->
}
“给它一个位置”是什么意思？ 使用您的建议时，我没有看到任何变化。 请发布完整的代码以使其正常工作。编辑：我还没有看到页脚。现在它适用于长页面，但短页面现在出现了问题。 - Paul
您不需要使用min-height和height，只需使用min-height并指定一个数字。此外，不必担心“ie6”，更应该考虑移动端视图。 - Dustin Scott Garza
我知道这是一个旧评论，但还是谢谢！我遇到了页脚不停留在底部的问题，然后我意识到我的正文和容器即使内容再大也不会扩展。所以我使用了overflow: auto;，它起作用了。 - Giuseppe The Dreamer
3
现在我们有了非常直观的 flex-box。
 body {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

注意：我们在body标签中只能包含两个div。一个是页脚，另一个是其他项目。

1
我们已经为此问题苦苦挣扎了一段时间。嵌套在多个 div 中的 div，加上各种 hack 和补丁，让我们陷入了噩梦之中。总是有意外情况需要更多的 hack 和补丁。
这就是我们最终选择的方案：
CSS：
html, body  {
    margin: 0px;
    padding: 0px;
    height: 100%;
    color: #6f643a;
    font-family: Arial;
    font-size: 11pt; 
}

form {
   height: 100%;
}

正文：

<table style="z-index: 1; margin: 0px; left: 0px; top: 0px; overflow:auto" border="0"  width="100%" height="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top" align="center" >
         contents goes here
        </td>
    </tr>
    <tr>
        <td valign="top" bgcolor="gray" align="center" style="padding:20px">
            <font color="#FFFF00">copyright:Puppy</font>
            footer goes here
        </td>
    </tr>
</table>

这就是你所需要的。 - 如果你正在使用asp.net，请不要忽略表单高度。

我喜欢页脚背景在短页面上一直延伸到底部的效果。 - Paul
0
html,body {
    margin:0;
    padding:0;
    height:100%;
}
.content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
.footerbar {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

如果IE7

<!--[if lt IE 7]>
<style type="text/css">
    .content { height:100%; }
</style>
<![endif]-->
我已经将您的建议添加到示例中。恐怕这并没有解决长页面上的问题。 - Paul
这确实解决了长页面的问题。但是它为短页面创建了一个新问题。 请查看我为长页面和短页面制作的这些Fiddles。 - Paul
0

这里有一个非常好的页脚教程在这里。

演示页面在这里。

基本原则是将主体页面拉伸到页面的100％。最小高度也为100％。

然后给页脚以下规则：

.footerbar {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}
现在问题来了。我认为我已经按照他们所示拥有了100％的min-height和height。但是如果您查看我的长页面，页脚显示不好。 - Paul
2
这个链接已经失效了。 - a2f0
0
position:fixed;
bottom:0;

如果您想在滚动时将页脚固定在底部，请将此代码添加到页脚。
目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
0
将“position”设置为“fixed”，并使用“bottom: 0”解决了我的问题。现在它是响应式的，页脚在更大的屏幕（PC、笔记本电脑）和较小的屏幕（智能手机）上都正确显示（即使滚动也是如此）。
.footerbar {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100vw;
  min-height: 3vh;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接