在页面底部的位置页脚具有固定的页眉 [英] Position footer at bottom of page having fixed header

问题描述

我要将页脚放置在页面底部，页面底部也有固定的标题。

• strong>不与位置：固定 - 我不想让它保留在屏幕上，它应该只是在页面的结尾，并且行为正常

，即;之后的所有其他内容。

---

解释更好：

---

以下是代码：

• 我准备了一个演示： JSFiddle


• 或见下文

 < div id =header>标头< / div> 
< div id =content> 
< p>一些内容...< / p> 
< / div> 
< div id =footer> Footer< / div> 
  

  body {
 / *只是在JSFiddle中启用滚动* / 
 height：1000px; 
} 
 
 #header {
 width：100％; 
 height：100px; 
 position：fixed; 
 top：0px; 
 z-index：1; 
} 
 
 #content {
 width：100％; 
 position：absolute; 
 top：100px; / *头的高度* / 
 z-index：0; 
} 
 
 #footer {
 width：100％; 
 height：100px; 
 position：absolute; 
 bottom：0px; 
} 
 
 / *仅用于演示* / 
 #header，#footer {
 border：3px dotted＃333333; 
 background：#FFFFFF; 
} 
 
 #content {
 background：#CCCCCC; 
 height：200px; 
} 
  

解决方案

code> position：fixed 将相对于视口定位页脚，而不是页面本身。因此，我们必须保持元素在正常流动，并以某种方式将其定位到页面的底部。

有两种方法来实现，已经讨论过

例如：

• http://alistapart.com/\"> A List Apart 的文章探索页脚 - 由 Bobby Van Der Sluis ，2004


• footerStickAlt - 由 Craig Erskine a> ，2005


• 粘滞页脚 - Shelly Cole ，2006


• 如何让页脚位于页面底部 - 通过 马修·詹姆斯·泰勒 ，2007


• 将页脚粘到页面底部 - 按 Ryan Fait ，2007


• 精简版的Ryan Fait's Sticky Footer - Chris Coyier ，2009


• 粘性CSS页脚：灵活方式 （使用 CSS表） - 通过 Torben Haase ，2011


• Responsive Sticky Footer （精炼版的Torben的方法） - Joshua Cook ，2013


• 由Flexbox解决的粘滞页脚 - 通过 菲利普·沃尔顿 ，2013

粘性页脚

在这个答案中，我会使用 Ryan Fait的方法，因为它很简单

考虑到以下结构：

 < div id =content> <！ - 内容在这里。它可以（不）包括头部> < / div> 
< div id =footer> Footer< / div> 
  

需要以下步骤：

1. 设置< html> 和的 height >

   / li>
   

2. 我们需要做的最重要的事情是确保 #content 足够高， c $ c> #footer 向下翻页。因此，我们给出 #content a min-height of 100％。




3. 到目前为止， #content 已经占用了视口高度的 100％，因此我们应该将页脚向上拉以将其定位在底部这一页。为了这样做，我们可以给 #content 一个负值 margin-bottom 等价于页脚的 height 。此外，为了确保页脚出现在内容的顶部，我们应该位置页脚相对 ly。 此处演示 。




4. 可以看出，当 #content 按其内容增长时，一些内容落后于页脚。我们可以通过在 #content 的末尾添加一个spacer元素，或者使用 padding-bottom 和 框大小：border-box ² ，这应该是 IE8支持的。 / p>

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 盒尺寸

更新示例

  #content {
 min-height：100％; 
 margin-bottom：-100px; / *相当于页脚的高度* / 
 padding-bottom：100px; / *相当于页脚的高度* / 
 
 box-sizing：border-box; 
} 
  

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

---

添加标题

1. 如果标头在正常流程中保持，您只需将其添加到 #content ，如下所示：
   
   （ 这里的示例 ）

    < div id =content> 
   < div id =header>标头< / div> 
    ... 
     




2. 但是如果应该 ³ ，我们需要按顺序推送 #content 元素的内容以防止重叠。

请在 #content （ 示例）的开头添加一个分隔符 ）：

 < 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> <！ - 内容在这里。 - > < / div> 
< div id =footer> Footer< / div> 
  

  #content {
 min-height：100％; 
 margin-bottom：-100px; / *相当于页脚的高度* / 
 
 padding-top：50px; / *等效于标题的高度* / 
 padding-bottom：100px; / *相当于页脚的高度* / 
 
 box-sizing：border-box; 
} 
  

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

最后但并非最不重要的！

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

---

sup> 1。需要这样做才能使 最小高度：100％ 来处理 #content 元素（因为百分比值相对于 height 由< body> 建立的框的包含块）。此外，< html> 应有明确的 height 使 height：100％可在< body& 。

^{2。 框大小：border-box 使UAs计算包括填充和边框的框的 width / height 。}

^{3。 根据规范，绝对定位的元素是具有位置的元素 $>}

$ <$ p $ c>

$

I want to position the footer at the bottom of the page which having a fixed header also...

• Not with position: fixed - I don't want it to remain on the screen, it should just be at the end of the page and behave normally when scrolling.

• Not at the bottom of the visible screen - At the bottom of the page, i.e; after all other content.

---

Here's a diagram to explain better:

---

Here's the code:

• I have prepared a demo: JSFiddle
• Or see below

<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;
}

解决方案

As you have mentioned, position: fixed would position the footer with the respect to the viewport rather than the page itself. Therefore, we have to keep the element in normal flow and somehow position it to the bottom of the page.

There are couple of approaches to achieve that, which have been discussed in the wild during the time.
For instance:

• A List Apart's article Exploring Footers - by Bobby Van Der Sluis, 2004
• footerStickAlt - by Craig Erskine, 2005
• Sticky Footer - by Shelly Cole, 2006
• How to keep footers at the bottom of the page - by Matthew James Taylor, 2007
• Make the Footer Stick to the Bottom of a Page - by Ryan Fait, 2007
• Refined version of Ryan Fait's Sticky Footer - by Chris Coyier, 2009
• Sticky CSS footers: The flexible way (which uses CSS Tables) - by Torben Haase, 2011
• Responsive Sticky Footer (refined version of Torben's approach) - by Joshua Cook, 2013
• Solved by Flexbox's Sticky Footer - by Philip Walton, 2013

Sticky Footer

In this answer I'd go with Ryan Fait's method since it is simple and easy to understand and also it meets your needs (Situations where both header and footer have fixed heights).

Considering the structure below:

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

The following steps are needed:

1. Setting height of the <html> and <body> elements to 100% which is required for the next step¹.

2. The most important thing we need to do is to make sure that the #content is high enough to push the #footer down the page. Hence we give the #content a min-height of 100%.

3. So far, the #content has taken 100% of height of the viewport, thus we should pull the footer up to position it at the bottom of the page. In order to do that we could give the #content a negative margin-bottom equivalent to the footer's height. Also to make sure that the footer appears on top of the content, we should position the footer relatively. Demo Here.

4. As can be seen, when the #content grows by its contents, some of the contents go behind the footer. We could avoid that either by appending a spacer element at the end of #content or use the combination of padding-bottom and box-sizing: border-box² which is supposed to be supported on IE8 as well.

4.1 Adding a spacer

Example Here

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

.spacer, #footer { height: 100px; }

4.2 Combination of padding-bottom and box-sizing

Updated Example

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

    box-sizing: border-box;
}

(Note that vendor prefixes omitted due to brevity)

---

Adding the Header

1. If the header should remain in normal flow, you could simply add it to the #content as follows:
   (Example Here)

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

2. But if it should be positioned absolutely³, we need to push the contents of #content element down in order to prevent overlapping.

Therefore, again, we could either add a spacer at the beginning of #content (Example Here):

<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>

Or use the combination of padding-top and box-sizing as follows:

<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;
}

Updated Example (Note that vendor prefixes omitted due to brevity)

At last but not least!

Nowadays, All major modern web browsers support box-sizing: border-box declaration (including IE8). However if you're looking for the traditional way which has a wider browser support, stick with using spacer elements.

---

^{1. This is needed to make min-height: 100% to work on the #content element (because a percentage value is relative to the height of the box's containing block which is established by the <body>). Also <html> should have an explicit height to make height: 100% to work on <body>.}

^{2. box-sizing: border-box makes UAs calculate the width/height of the box including padding and borders.}

^{3. According to spec, absolutely positioned elements are elements having a position of absolute or fixed.}

这篇关于在页面底部的位置页脚具有固定的页眉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！