为什么粘性页脚不起作用？

Question

我已经尝试了几件事，但我的粘性标题不起作用。我一直在尝试我找到的几个教程，但没有一个有效。我还查看了有关 stackoverflow 的不同帖子，但没有人描述我的问题。 这是我的 HTML：

<div id='container'>
    <div id='header>blabla</div>
    <div id='actualpage'>bblablabal</div>
    <div id='footer'>blablafooterblabla</div>
</div>

这是css：

html, body {
padding: 0;
margin: 0;
height: 100%;
}
#container{
background-color:white;
width:100%;
min-height: 100%;
height:100%;
}
#actualpage{
width:750px; 
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
#footer{
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
}

感谢您的帮助！

Answer 1

您可以将position: fixed 或position:absolute（如果您不希望页脚在滚动时粘在底部）添加到您的#footer：

#footer{
    margin-top:-20px;
    clear:both;
    height:20px;
    background-color:#A6CE39;
    padding-top:6px;
    padding-bottom:6px;
    min-width:100%;
    bottom:0;
    position: fixed;
}

Answer 2

将position:absolute; 添加到您的#footer <div id='header> 应该是 <div id='header'>

Answer 3

如果您指的是您的footer，您可以将position: absolute 添加到您的#footer

Fiddle

#footer {
    margin-top:-20px;
    clear:both;
    height:20px;
    background-color:#A6CE39;
    padding-top:6px;
    padding-bottom:6px;
    min-width:100%;
    bottom:0;
    position: absolute;
}

Answer 4

#container{
background-color: yellow;
width:100%;
min-height: 100%;
}
#actualpage{
width:750px; 
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
#footer{
margin-top:-32px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
}


<div id='container'>
    <div id='header'>blabla</div>
    <div id='actualpage'>bblablabal</div>
</div>
    <div id='footer'>blablafooterblabla</div>

您需要容器 div 之外的页脚。 另外，底部：0；属性是不必要的，页脚的负边距需要包含填充，这会增加计算的高度

** 同样，将结束的“'”添加到 id='header

Answer 5

tl;dr

查看工作中的 CodePen：http://cdpn.io/KwzuA

或使用 Flexbox - 参见演示：http://codepen.io/astrotim/pen/PwYQOJ/right/?editors=010

说明

将position 用于粘性页脚通常不是一个好主意，因为它会从文档流中删除元素，并且在滚动时可能会导致页脚与内容重叠而产生不希望的结果。 p>

一种经过验证且值得信赖的方法是在包装器 div 内添加一个“推送”div，然后在包装器外部添加页脚 div。像这样：

<div id="wrapper">

  <header>
    <h1>Header</h1>
  </header>

  <div id="body">
    <p>Lorem ipsum...</p>
  </div><!--#body-->

  <div class="push"></div>

</div><!--#wrapper-->

<footer>
  <p>Footer</p>
</footer>

对于 CSS，您需要将 html、body 和 #wrapper 设置为 height: 100%。然后将固定高度设置为footer，并将相同的高度应用于#push。然后你用一个负的margin-bottom 来抵消身体。 #wrapper 需要一些其他属性，如下所示：

html, body {
  height: 100%;
}
body {
  overflow-y: scroll;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -160px;  
}
.push, footer {
  height: 160px;
}
footer {
  /* remember the box model: padding+height  */
  padding-top: 15px;
  height: 145px;
}

现在，当页面内容延伸到折叠下方时，页脚将正确流动，而当内容不延伸时，页脚将保持粘性。

** 使用弹性盒 **

解决这个问题的现代方法是使用 Flexbox。见：http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

我在recent project 上使用了 Flexbox 技术