HTML – 具有固定标题的真正粘性页脚？

发布时间：2020-12-14 19:43:27 所属栏目：资源来源：网络整理

导读：首先,请阅读整个问题,以便您完全理解我在寻找什么,谢谢！这是一个我一直在努力研究的问题,现在已经让我退出了一段时间.我可以使用固定标题的真正粘性页脚吗？如何实现具有固定标头的粘性页脚？我无法在身体或内容中添加填充或边距,因为这会打破页脚.此外,

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

这是一个我一直在努力研究的问题,现在已经让我退出了一段时间.我可以使用固定标题的真正粘性页脚吗？

如何实现具有固定标头的粘性页脚？我无法在身体或内容中添加填充或边距,因为这会打破页脚.此外,我希望能够在我的内容中使用宽度：100％和高度：100％,而不会溢出并造成混乱.

这就是我的目标(请原谅我的Photoshop技巧)：

这看起来不错,当我使用position：fixed;和底部：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“黑客”？

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

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

上面的例子有效,但是页脚搞砸了.如何在不弄乱粘性页脚的情况下实现此效果？

解决方法

一个可能的解决方案是交换您的内容：之后内容：之前.

Working Demo

CSS：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!