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;博士

请参阅CodePen：http://cdpn.io/KwzuA

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

<强>解释

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

一个经过尝试和信任的方法是在包装器div中添加一个“push”div，然后在包装器外面有下面的footer 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 **

现代的方法是使用Flexbox。请参阅：http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

我在recent project

上使用了Flexbox技术

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

5 个答案: