为啥粘性页脚不起作用？

Posted 2023-03-21

【中文标题】为啥粘性页脚不起作用？

【英文标题】：Why doesn't sticky footer work?为什么粘性页脚不起作用？

【发布时间】：2014-05-04 05:32:04

【问题描述】：

我已经尝试了几件事，但我的粘性标题不起作用。我一直在尝试我找到的几个教程，但没有一个有效。我还查看了有关 *** 的不同帖子，但没有人描述我的问题。 这是我的 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;

感谢您的帮助！

【问题讨论】：

是页眉还是页脚？

也许小提琴会很棒

【参考方案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;

【讨论】：

位置：固定在滚动时会粘在底部

我不确定 OP 是否想要这个。

这行得通，但是如果我的页面较长并且需要滚动怎么办？ （页脚保持在同一个地方）而且我不希望它被固定所以它会随着我向下滚动，我只是希望它位于页面底部

然后从您的#footer 中删除bottom: 0

【参考方案2】：

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

【讨论】：

这行得通，但是如果我的页面较长并且需要滚动怎么办？ （页脚停留在同一个地方）而且我不希望它被固定，所以它会随着我向下滚动，我只是希望它位于页面底部。

【参考方案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;

【讨论】：

这行得通，但是如果我的页面较长并且需要滚动怎么办？ （页脚停留在同一个地方）而且我不希望它被固定，所以它会随着我向下滚动，我只是希望它位于页面底部。

【参考方案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

【讨论】：

如果您需要更多详细信息，请参阅此链接：http://www.cssstickyfooter.com/using-sticky-footer-code.html

【参考方案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 技术