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

Question

提问by Drahcir

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.

不position: fixed- 我不希望它保留在屏幕上，它应该位于页面的末尾并且在滚动时表现正常。
不在可见屏幕的底部 - 在页面底部，即；毕竟是其他内容。

Here's a diagram to explain better:

这里有一张图表可以更好地解释：

Footer problem

页脚问题

Here's the code:

这是代码：

I have prepared a demo: JSFiddle
Or see below

我准备了一个演示：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;
}

Answer 1

回答by Hashem Qolami

As you have mentioned, position: fixedwould 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.

正如您所提到的，position: fixed将根据视口而不是页面本身来定位页脚。因此，我们必须使元素保持正常流动并以某种方式将其定位到页面底部。

There are couple of approaches to achieve that, which have been discussed in the wildduring 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

A List Apart的文章探索页脚- Bobby Van Der Sluis，2004 年
footerStickAlt-克雷格·厄斯金( Craig Erskine) 于 2005 年
粘性页脚- Shelly Cole，2006 年
如何将页脚保留在页面底部-马修·詹姆斯·泰勒( Matthew James Taylor) 于 2007 年
使页脚粘在页面底部- Ryan Fait，2007 年
Ryan Fait 的粘性页脚的改进版- Chris Coyier，2009 年
粘性 CSS 页脚：灵活的方式（使用CSS 表格）- Torben Haase，2011 年
响应式粘性页脚（Torben 方法的改进版）- Joshua Cook 于2013 年
由 Flexbox的粘性页脚解决- 作者：Philip Walton，2013 年

Sticky Footer

粘性页脚

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

在这个答案中，我将使用Ryan Fait 的方法，因为它简单易懂，而且满足您的需求（页眉和页脚都具有固定高度的情况）。

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:

需要以下步骤：

Setting heightof the <html>and <body>elements to 100%which is required for the next step¹.
The most important thing we need to do is to make sure that the #contentis high enough to push the #footerdown the page. Hence we give the #contenta min-heightof 100%.
So far, the #contenthas 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 #contenta negative margin-bottomequivalent to the footer's height. Also to make sure that the footer appears on top of the content, we should positionthe footer relatively. Demo Here.
As can be seen, when the #contentgrows 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 #contentor use the combination of padding-bottomand box-sizing: border-box²which is supposed to be supported on IE8as well.

设置下一步所需height的<html>和<body>元素¹。100%
我们需要做的最重要的事情是确保#content足够高以将#footer页面向下推。因此，我们给出#content一个min-height的100%。
到目前为止，#content已经占据100%了视口的高度，因此我们应该将页脚向上拉以将其定位在页面底部。为了做到这一点，我们可以给#content一个负margin-bottom相当于页脚height。同样为了确保页脚出现在内容的顶部，我们应该position将页脚放在relatively。演示在这里。
可以看出，当#content其内容增长时，一些内容会在页脚后面。我们可以通过在末尾附加一个间隔元素#content或使用padding-bottom和²的组合来避免这种情况，IE8也应该支持。box-sizing: border-box

4.1 Adding a spacer

4.1 添加间隔

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`

4.2`padding-bottom`和的组合`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

添加标题

If the header should remain in normal flow, you could simply add it to the #contentas follows:
(Example Here)
```
<div id="content">
    <div id="header">Header</div>
    ...
```
But if it should be positioned absolutely³, we need to push the contents of #contentelement down in order to prevent overlapping.

如果头应保持在正常流动，你可以简单地把它添加到#content如下：
（示例这里）
```
<div id="content">
    <div id="header">Header</div>
    ...
```
但是如果它应该绝对定位³，我们需要将#content元素的内容向下推，以防止重叠。

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

因此，同样，我们可以在#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>

Or use the combination of padding-topand box-sizingas follows:

或者使用的组合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;
}

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-boxdeclaration (including IE8). However if you're looking for the traditional way which has a wider browser support, stick with using spacer elements.

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

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

^{1. 这需要min-height: 100%在#content元素上工作（因为百分比值是相对于由height建立的框的包含块的<body>）。还<html>应该有一个明确的height做出height: 100%上班的<body>。}

^{2. box-sizing: border-boxmakes UAs calculate the width/heightof the box including padding and borders.}

^{2.box-sizing: border-box使 UA 计算包含填充和边框的框的width/ height。}

^{3. According to spec, absolutely positioned elements are elements having a positionof absoluteor fixed.}

^{3.根据 spec，绝对定位元素是具有positionofabsolute或的元素fixed。}

Answer 2

回答by Slulego

You almost got it. What you need is a container.

你几乎明白了。你需要的是一个容器。

Here is my revised bit: JSFiddle Update

这是我的修订版： JSFiddle 更新

Add a container div:

添加容器div：

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

Then make the position relative, and the height 100%:

然后使位置相对，高度为 100%：

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

And make sure the position is absolute for the footer.

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

Answer 3

回答by Mike 'Pomax' Kamermans

Or for those who found this post by googling and want an even shorter answer, without wrappers (because you don't need them):

或者对于那些通过谷歌搜索找到这篇文章并想要一个更短的答案的人，没有包装器（因为你不需要它们）：

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

done, the page is now at least 100% screen height, and the footer is at the bottom of the page, not the bottom of "the screen". If the page is longer than the screen, it'll still be at the bottom, and we did it without artificial "wrapper elements" or the likes: the bodyelement is already the wrapper we need =)

完成后，页面现在至少为 100% 屏幕高度，页脚位于页面底部，而不是“屏幕”的底部。如果页面比屏幕长，它仍然会在底部，我们没有人工“包装元素”或类似的东西：body元素已经是我们需要的包装器 =)

The only caveat is that the body margin needs to be the same as the footer height, but then as negative value, since the "bottom: 0" rule will make the footer start at the bottominstead of baseline-anchored. Then again, as CSS, .less or .styl, this is trivially ensured.

唯一的警告是正文边距需要与页脚高度相同，但随后为负值，因为“底部：0”规则将使页脚从底部开始而不是基线锚定。再说一次，作为 CSS，.less 或 .styl，这是微不足道的保证。

Answer 4

回答by Emma

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

Answer 5

回答by Camo

I'm pretty new at web development, and I know this has been answered already, but this is the easiest way I found to solve it and I think is somehow different. I wanted something flexible because my footer can have different heights on different sections of the web app. And I ended up using FlexBox and a spacer.

我是网络开发的新手，我知道这已经得到了回答，但这是我找到的最简单的解决方法，我认为有些不同。我想要一些灵活的东西，因为我的页脚在 web 应用程序的不同部分可以有不同的高度。我最终使用了 FlexBox 和一个垫片。

Start by setting the height for your html and body

首先设置 html 和 body 的高度

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

I'm assuming a columnbehavior for our app, in the case you need to add a header, hero or any content vertically aligned.

我假设column我们的应用程序有一个行为，如果您需要添加标题、英雄或任何垂直对齐的内容。

Create the spacer class

创建间隔类

.spacer {
    flex: 1; 
}

So later on your HTML could be something like

所以稍后你的 HTML 可能类似于

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

You can play with it here https://codepen.io/anon/pen/xmGZQL

你可以在这里玩它 https://codepen.io/anon/pen/xmGZQL

Answer 6

回答by Stano

To do it simple:

要做到这一点很简单：

#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

提琴手

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

提问by Drahcir

回答by Hashem Qolami

Sticky Footer

粘性页脚

4.1 Adding a spacer

4.1 添加间隔

4.2 Combination of `padding-bottom`and `box-sizing`

4.2`padding-bottom`和的组合`box-sizing`

Adding the Header

添加标题

At last but not least!

最后但并非不重要！

回答by Slulego

回答by Mike 'Pomax' Kamermans

回答by Emma

回答by Camo

回答by Stano

相关推荐

最近更新

标签

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

提问by Drahcir

回答by Hashem Qolami

Sticky Footer

粘性页脚

4.1 Adding a spacer

4.1 添加间隔

4.2 Combination of padding-bottomand box-sizing

4.2padding-bottom和的组合box-sizing

Adding the Header

添加标题

At last but not least!

最后但并非不重要！

回答by Slulego

回答by Mike 'Pomax' Kamermans

回答by Emma

回答by Camo

回答by Stano

相关推荐

Html 仅使用 css 设置禁用输入的样式

Html 禁用的表单字段未提交数据

Html 如何在div中对齐文本？

Html 为什么我的 Rails 多选中的第一个元素总是空白，使用嵌入式数组？

相关推荐

最近更新

标签

4.2 Combination of `padding-bottom`and `box-sizing`

4.2`padding-bottom`和的组合`box-sizing`