将页脚放在页面底部（如果需要滚动）

Question

我正在尝试在页面底部显示页脚。如果页面长于 1 个屏幕，我希望页脚仅在滚动到底部后显示。所以我不能使用'position: fixed'，因为那样它会一直显示。

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

然而，当我使用以下内容时，由于某种原因，页脚显示在我的长页面的一半。

position: absolute; bottom:0

我有短页和长页，我希望它位于它们的底部。

如何将页脚也保留在长页面的底部？

Fiddle

我创建这些 Fiddle 是为了显示问题并测试代码。请 post 为您的解决方案提供一个工作示例。

我的页脚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; }

Answer 1

我建议采用 "sticky footer" 方法。请参阅以下内容link：

http://css-tricks.com/snippets/css/sticky-footer/

Answer 2

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

Answer 3

有一个很好的页脚教程here。

演示页面是 here。

基本前提是主体页面拉伸到页面的 100%。最小高度也为 100%。

然后为页脚指定以下规则：

.footerbar {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

Answer 4

将高度替换为overflow:auto； & 给body一个位置

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

相对于 body

定位页脚

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

Answer 5

我们已经为这个问题苦苦挣扎了一段时间。 div 与几个嵌套的 div 结合黑客和补丁正在变成我们的噩梦。总是有惊喜需要更多的黑客攻击和更多的补丁。这是我们的解决方案：

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，请不要忽略表格高度。

Answer 6

现在我们有了 flex-box，非常简单。

 body {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

注意：我们必须在正文中只包含两个div。一个用于页脚，另一个用于其余项目

Answer 7

同样，这里是 flexbox 带有一个干净的 hack 的地方：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 扩展元素以适应剩余的 space，因为 #container 的最小高度为100vh（即视口高度）。显然，如果 #content 加上页脚的高度超过视口高度，则 #container 将可以滚动。这样，页脚始终保持在最底部。

片段中的动画属于 #content 中的示例部分，它试图向您展示完全相同的东西：它的高度在 30px 和 400px 之间变化（如果需要，将其更改为更大的值）。

此外，为了了解信息，请参阅。

提示： 在 CSS3 中，如果某些东西不起作用，请查看 flexboxes 和 grids。他们经常提供干净的解决方案。

希望对您有所帮助。

Answer 8

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

Answer 9

position:fixed;
bottom:0;

如果您想在滚动时将页脚放在底部，请将此添加到页脚。

将页脚放在页面底部（如果需要滚动）

Keep footer at the bottom of the page (with scrolling if needed)

html

css

footer

短页面编辑