一个真正的粘性页脚与固定的标题？ [英] A true sticky footer with a fixed header?

问题描述

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

First of all, please read this whole question so you can fully understand what i am looking for, Thanks!

这是一个我一直在试图研究一个伟大的时间，一个问题，已经困扰我退出一段时间。我可以有一个固定页眉的真粘页脚吗？

This is a question i have been trying to research for a great time now, and has stumped me for quit a while. Can i have a true sticky footer with a fixed header?

如何实现一个固定页眉的粘页脚？我不能添加填充或边距的身体或内容，因为这将打破页脚。此外，我希望能够在我的内容中使用 width：100％和 height：100％

How can i implement a sticky footer with a fixed header? I can't add padding or a margin to the body or content, since that will break the footer. Also, i want to be able to use width:100% and height: 100% inside my content without it overflowing and creating a mess.

这里是我的目标（请原谅我伟大的Photoshop技能）：

Here is what i am aiming for (Please excuse my great Photoshop skills) :

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

This look good, when i use position:fixed; and bottom:0; on my footer. But to make it truly sticky, i need to add some css to my page. (from : 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;
}

这让我有一个很好看的粘性页脚，但这里是问题。一些内容在我的固定导航栏下面。

This allows me to have a GREAT looking sticky footer, but here is the problem. Some of the content is underneath my fixed navigation bar.

我无法在body，html或内容中添加填充或边距，因为这会使粘性脚步乱。有没有办法我可以做到没有CSSHacks？

I can't add padding or a margin to the body, html, OR the content, because that will make the sticky footer mess up. Is there any way i can do this without CSS "Hacks"?

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

This is with the content under the header: http://jsfiddle.net/g2ydV/3/

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

Looks good right!, but some of the content is hidden under the header? Lets fix that by adding a margin to the content: http://jsfiddle.net/g2ydV/2/

上面的例子工作，但页脚被乱了。

The above example works, BUT the footer is messed up. How can i achieve this effect without messing up my sticky footer?

推荐答案

一个潜在的解决方案是交换你的 content：after 到 content：before 。

One potential solution is to swap your content:after to content:before.

工作演示

Working Demo

CSS：

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

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

这篇关于一个真正的粘性页脚与固定的标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！