将页脚保持在页面底部(如果需要,可以滚动)

Question

我试图在页面底部显示一个页脚.如果页面比1个屏幕更长,我喜欢页脚只能在滚动到底部后显示.所以我不能使用'position:fixed',因为它会一直显示出来.

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

但是,当我使用以下内容时,由于某种原因,页脚显示在我的长页面的中间.

position: absolute; bottom:0 

我有短页和长页,我希望它在两者的底部.

如何在长页面上保持页脚的底部？

小提琴

我创建了这些小提琴以显示问题并测试代码.请用您的解决方案发布一个工作示例.

• 短页

• 长页面

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

我建议使用"粘性页脚"方法.请参阅以下链接:

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

Answer 2

同样，这就是弹性盒带来的干净技巧：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（如果需要，请将其更改为更大的值）。

另外，为了获得信息，请参阅and (or )之间的区别flex-basisheightwidth。

提示：在 CSS3 中，如果某些功能不起作用，请查看 Flexbox 和网格。他们经常提供干净的解决方案。

希望能帮助到你。

Answer 3

用溢出替换高度：自动；&给身体一个位置

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