具有固定页眉的真正粘性页脚？

Posted 2023-03-05

【中文标题】具有固定页眉的真正粘性页脚？

【英文标题】：A true sticky footer with a fixed header?

【发布时间】：2014-03-02 13:48:19

【问题描述】：

首先，请阅读整个问题，以便您完全理解我在寻找什么，谢谢！

这是我一直在尝试研究很长时间的一个问题，并且已经让我放弃了一段时间。我可以有一个带有固定页眉的真正粘性页脚吗？

如何实现带有固定页眉的粘性页脚？我不能为正文或内容添加填充或边距，因为这会破坏页脚。另外，我希望能够在我的内容中使用width:100% 和height: 100%，而不会溢出并造成混乱。

这是我的目标（请原谅我出色的 Photoshop 技能）：

当我在页脚上使用 position:fixed; 和 bottom:0; 时，这看起来不错。但要使其真正具有粘性，我需要在我的页面中添加一些 CSS。 （来自：http://css-tricks.com/snippets/css/sticky-footer/）

* 
  margin: 0;

html, body 
  height: 100%;

.page-wrap 
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 

.page-wrap:after 
  content: "";
  display: block;

.site-footer, .page-wrap:after 
  /* .push must be the same height as footer */
  height: 142px; 

.site-footer 
  background: orange;

这让我有一个看起来很棒的粘性页脚，但问题就在这里。部分内容位于我的固定导航栏下方。

我无法为正文、html 或内容添加填充或边距，因为这会使粘性页脚混乱。如果没有 CSS “Hacks”，我有什么办法可以做到这一点？

这是与标题下的内容：http://jsfiddle.net/g2ydV/3/

看起来不错！但有些内容隐藏在标题下？让我们通过为内容添加边距来解决这个问题：http://jsfiddle.net/g2ydV/2/

上面的例子有效，但是页脚搞砸了。我怎样才能在不弄乱我的粘性页脚的情况下实现这种效果？

【问题讨论】：

在您的第一个示例中，我没有看到任何隐藏在您的标题下的内容，看起来它正在按照您的要求工作。我误解了这个问题吗？

@badAdviceGuy 对不起，我应该让自己更清楚。文本，我做了下拉，所以你可以阅读它。让我快速修复它。如果您在 Google Chrome 上进入 Inspect Element，您可以看到它是。

@badAdviceGuy jsfiddle.net/g2ydV/3

这是您要找的吗？ jsfiddle.net/g2ydV/7 我刚刚在您的内容中添加了另一个 div 块，以将您的所有常规内容向下推送，就像固定标题一样。

@ntgCleaner 是的，这很好，但为什么内容在到达之前将页脚向下推？

【参考方案1】：

一种可能的解决方案是将您的 content:after 交换为 content:before。

Working Demo

CSS：

/* .content:after 
     content: "";
     display: block;
 */

.content:before 
 content: "";
 display: block;
 height: 45px;

【讨论】：

哇，完美！一个问题。当内容从未到达页脚顶部时，为什么页脚开始向下滚动？

您已将内容的高度设置为 300 像素。如果您删除它，那么内容将仅与内容一样高。

好的，太棒了。有什么办法可以扩展内容以填充该空间的其余部分？

并非没有很多诡计。我建议使用 Ryan Fait 的粘性页脚解决方案 ryanfait.com/sticky-footer。然后您就可以摆脱占用所需空间的内容

我发现你需要.content:before和.content:after

【参考方案2】：

还有另一种使用display: table; 和display: table-cell 的方法，似乎越来越流行。

我只是把它作为一个值得一看的替代方案。它非常干净，不需要为页眉和页脚定义任何高度，这很好。

HTML

<div id="wrap">
  <div id="wrap-inner">

    <div class="navbar">
      <span>Fixed Header (content under here)</span>
    </div>

    <div class="content">
      <p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
    </div>

    <div class="footer">
      <span>Sticky footer!</span>
    </div>

  </div>
</div>

CSS

html, body 
  height: 100%;


body 
  margin: 0;


#wrap 
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;


#wrap-inner 
  vertical-align: middle; /* optional for positioning content in the middle */
  display: table-cell;


.navbar, .footer 
  position: fixed;
  width: 100%;


.navbar 
  top: 0;
  width: 100%;


.footer 
  bottom: 0;

Demo

【讨论】：

粘性页脚并不意味着fixed 页脚。一旦内容变得更大，我希望页脚与页面一起下降。

你可以绝对定位它，相对于#wrap-inner。虽然我意识到定义导航栏的高度是不可避免的，但它只是在这里工作，因为内容段落的边距。尽管如此，只有导航栏高度需要定义，而不是页脚。 jsfiddle.net/davidpauljunior/g2ydV/9

【参考方案3】：

固定标题是我的决定

html 
    position: relative;
    min-height: 100%;


#main-container 
    padding-top: 55px; /*  this is header height  */


footer 
    position: absolute;
    bottom: 0;
    width: 100%;

【参考方案4】：

body 
  margin: 0;
  padding:0;
  line-height: normal;
  height: 100%;
  overflow: hidden;


.header 
  background:#3d5084;
  padding: 16px 0 16px 30px;
  display: flex;
  align-items: center;
  justify-content: center;


.main-middle-container 
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: calc(100vh - 150px);
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
  background: #f1f1f1;


 .footer 
   background: #3d5084;
   padding: 11px 25px;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   position: relative;
   z-index: 1;

Demo link