将页脚定位在具有固定页眉的页面底部

我想定位页面底部有一个固定的标题页脚…

  • 不与position: fixed – 我不希望它保持在屏幕上，它应该只是在页面的末尾，滚动时正常行事。

  • 不在可见屏幕的底部 – 在页面的底部，即; 毕竟其他内容。

下面是一个更好的解释图：

页脚问题

代码如下：

  • 我准备了一个演示： JSFiddle
  • 或者看下面 
 <div id="header">Header</div> <div id="content"> <p>Some content...</p> </div> <div id="footer">Footer</div> 
 body{ /* Just to enable scrolling in JSFiddle */ height: 1000px; } #header{ width: 100%; height: 100px; position: fixed; top: 0px; z-index: 1; } #content{ width: 100%; position: absolute; top: 100px; /*Height of header*/ z-index: 0; } #footer{ width: 100%; height: 100px; position: absolute; bottom: 0px; } /*For demo only*/ #header, #footer{ border: 3px dashed #333333; background: #FFFFFF; } #content{ background: #CCCCCC; height: 200px; }

正如你所提到的， position: fixed会将页脚定位到视口而不是页面本身。 因此，我们必须保持元素正常stream动，并以某种方式将其放置在页面的底部。

有几种方法可以实现这一点，这在当时已经在野外讨论过了 。
例如：

  • A List Apart的文章探索页脚 – Bobby Van Der Sluis ，2004
  • footerStickAlt – 由克雷格Erskine ，2005年
  • 粘性页脚 – 由雪莉科尔 ，2006年
  • 如何保持页脚底部 – 马修·詹姆斯·泰勒 2007年
  • 使页脚粘在一页的底部 – 通过瑞安Fait ，2007年
  • Ryan Fait的Sticky Footer精制版 – 由Chris Coyier撰写 ，2009
  • 粘性CSS页脚：灵活的方式 （使用CSS表格 ） – Torben Haase ，2011
  • Responsive Sticky Footer （Torben的方法的改进版本） – Joshua Cook ，2013
  • 由Flexbox的粘滞页脚 解决 – 由Philip Walton ，2013年提供

粘脚

在这个答案中，我会selectRyan Fait的方法，因为它简单易懂，同时也符合你的需求（页眉和页脚都有固定高度的情况） 。

考虑下面的结构： 

 <div id="content"> <!-- content goes here. It may (not) include the header --> </div> <div id="footer">Footer</div>

需要以下步骤：

  1. 将<html>和<body>元素的height设置为100% ，这是下一步所需的1 。

  2. 我们需要做的最重要的事情是确保＃内容足够高，将#footer向下推。 因此，我们给#content 100%的min-height 。

  3. 到目前为止 ，＃内容占据了视口高度的100% ，因此我们应该将页脚拉到页面底部。 为了做到这一点，我们可以给#content一个与页脚height相等的负margin-bottom 。 另外为了确保页脚出现在内容的顶部，我们应该relative position页脚。 在这里演示 。

  4. 可以看出，当＃内容的内容增长时，其中一些内容会落在页脚的后面。 我们可以通过在#content的末尾添加一个spacer元素或者使用padding-bottom和box-sizing: border-box 2的组合来避免这种情况。

4.1添加一个垫片

示例在这里 

 <div id="content"> <!-- content goes here --> <div class="spacer"></div> </div> <div id="footer">Footer</div> 
 .spacer, #footer { height: 100px; }

4.2 padding-bottom和box-sizing

更新示例 

 #content { min-height: 100%; margin-bottom: -100px; /* Equivalent to footer's height */ padding-bottom: 100px; /* Equivalent to footer's height */ box-sizing: border-box; }

（请注意，由于简洁省略了供应商前缀）

添加标题

  1. 如果标题应保持正常stream程 ，则可以简单地将其添加到#content ，如下所示：
    （ 这里的例子 ） 

     <div id="content"> <div id="header">Header</div> ...

  2. 但是，如果它应该绝对定位 3 ，我们需要将#content元素的内容向下推， 以防止重叠 。

因此，我们再次可以在#content （ Example Here ）的开头添加一个spacer： 

 <div id="header">Header</div> <div id="content"> <div class="header-spacer"></div> <!-- content goes here --> <div class="footer-spacer"></div> </div> <div id="footer">Footer</div>

或者使用padding-top和box-sizing的组合，如下所示： 

 <div id="header">Header</div> <div id="content"> <!-- content goes here. --> </div> <div id="footer">Footer</div> 
 #content { min-height: 100%; margin-bottom: -100px; /* Equivalent to footer's height */ padding-top : 50px; /* Equivalent to header's height */ padding-bottom: 100px; /* Equivalent to footer's height */ box-sizing: border-box; }

更新示例 （请注意，由于简洁，省略了供应商前缀）

最后但并非不重要！

现在，所有主stream的现代网页浏览器都支持box-sizing: border-box声明（包括IE8）。 但是，如果您正在寻找具有更广泛浏览器支持的传统方式，请坚持使用间隔元素。

1.这是使min-height: 100%在#content元素上工作所需要的（因为百分比值是相对于由<body>build立的框的包含块的height ）。 另外<html>应该有一个明确的height来使height: 100%在<body>上工作。

2. box-sizing: border-box使得UA计算包括填充和边框的框的width / height 。

根据规范 ，绝对定位的元素是具有绝对位置或fixed position的元素。

你几乎得到它。 你需要的是一个容器。

这是我修改的位： JSFiddle更新

添加一个容器div： 

 <div id="container"> <div id="header"></div> <div id="page"></div> <div id="footer"></div> </div>

然后做出相对的位置，高度100％： 

 #container { height: 100%; position: relative; }

并确保页脚的位置是绝对的。

或者对于那些通过Googlesearch发现这个post，并希望更短的答案，没有包装（因为你不需要他们）： 

 html { height: 100%; } body { min-height: 100%; position: relative; padding-bottom: 3em; } .footer { height: 3em; position: absolute; bottom: 0; }

完成后，页面现在至less有100％的屏幕高度，页脚位于页面的底部，而不是“屏幕”的底部。 如果页面比屏幕长，它仍然在底部，我们做了它没有人造的“包装元素”或类似： body元素已经是我们需要的包装=）

唯一需要注意的是，页边距需要与页脚高度相同，但是作为负值，因为“bottom：0”规则将使页脚从底部开始而不是基线锚定。 再次，作为CSS，.less或.styl，这是平凡的保证。

要做到这一点很简单： 

 #header { position: fixed; width:100%; height:100px; top:0px; z-index:2; } #content, #footer { position: relative; /* or leave it static as by default */ z-index:1; } body,div { margin:0; padding:0; /* http://jsfiddle.net/css/normalize.css */ } #content { margin-top: 100px; /* the same value as header's height */ }

的jsfiddle 

 But if you want the footer to take full size of the screen while #wrapper is 1000px and centered you would do: <body> <div id="wrapper"> <div id="wrapper-inner"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </div> </body> html, body { margin:0; padding:0; height:100%; } #wrapper { min-height:100%; position:relative; } #wrapper-inner { margin: 0 auto; width: 1000px; } #content { padding:10px; padding-bottom:80px; /* Height of the footer element */ } #footer { width:100%; height:80px; position:absolute; bottom:0; left:0; }
    Interesting Posts

    如何让页脚停留在网页的底部？