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

Posted 2023-03-05

技术标签:

【中文标题】将页脚放置在具有固定页眉的页面底部【英文标题】：Position footer at bottom of page having fixed header 【发布时间】：2013-08-30 10:14:04 【问题描述】：

我想将页脚放在页面底部，它也有一个固定的页眉...

不适用于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;

【问题讨论】：

我的代码格式似乎有问题。如果有人可以编辑，我将不胜感激。你在用IE吗？当我在 IE 中查看时，格式确实搞砸了！ content 需要有absolute 的位置吗？为什么不为您的内容和页脚使用一些相对位置？我的意思是你使用 margin-top : 100px;对于内容，您只需将页脚放在它之后。 @HashemQolami，我想是的。因为header是固定位置的，所以保证内容是可见的。 【参考方案1】：

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

有几种方法可以实现这一目标，在此期间在野外进行了讨论。例如：

A List Apart 的文章 Exploring Footers - by Bobby Van Der Sluis, 2004 footerStickAlt - Craig Erskine, 2005 Sticky Footer - Shelly Cole, 2006 How to keep footers at the bottom of the page - Matthew James Taylor, 2007 Make the Footer Stick to the Bottom of a Page - Ryan Fait, 2007 Refined version of Ryan Fait's Sticky Footer - Chris Coyier, 2009 Sticky CSS footers: The flexible way （使用 CSS Tables） - by Torben Haase, 2011 Responsive Sticky Footer （Torben 方法的改进版） - by Joshua Cook，2013 Solved by Flexbox's Sticky Footer - by Philip Walton, 2013

粘滞页脚

在这个答案中，我会选择Ryan Fait's method，因为它简单易懂，也可以满足您的需求（页眉和页脚都有固定高度的情况）。

考虑以下结构：

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

需要以下步骤：

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

我们需要做的最重要的事情是确保#content 足够高以将#footer 向下推到页面下方。因此，我们将#content 赋予min-height 或100%。

So far，#content 占用了视口高度的100%，因此我们应该将页脚向上拉到页面底部。为了做到这一点，我们可以给#content 一个负的margin-bottom 等效于页脚的height。另外为了确保页脚出现在内容的顶部，我们应该position 页脚relatively。 Demo Here。

可以看出，当#content 的内容增长时，一些内容会出现在页脚后面。我们可以通过在#content 的末尾附加一个间隔元素或使用padding-bottom 和box-sizing: border-box² 的组合来避免这种情况，这也应该是supported on IE8。

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

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

添加标题

如果标题应保持正常流程，您只需将其添加到#content，如下所示： (Example Here)

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

但是如果要绝对定位³，我们需要将#content元素的内容按to prevent overlapping的顺序下推。

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

或者使用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 （请注意，由于简洁，供应商前缀被省略）

最后但并非最不重要！

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

^{1.这是使min-height: 100% 对#content 元素起作用所必需的（因为百分比值是相对于由<body> 建立的框包含块的height）。同样<html> 应该有一个明确的height 以使height: 100% 可以在<body> 上工作。}

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

^{3。 According to spec，绝对定位元素是具有position 或absolute 或fixed 的元素。}

【讨论】：

谢谢，这对我很有用。我正在使用 JSFiddle #1，但我删除了框大小，它似乎适用于所有浏览器（包括 IE7）-jsfiddle.net/33vQy/2 @Drahcir 不客气 :) 事实上，在这种情况下，box-sizing: border-box; 会阻止页面在不需要时滚动。杰出的解释【参考方案2】：

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

这是我修改后的部分： JSFiddle Update

添加一个容器 div：

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

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

#container 
    height: 100%;
    position: relative;

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

【讨论】：

问题是如果我删除 body height 属性，那么它就会停止工作。【参考方案3】：

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

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

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

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

【讨论】：

谢谢，但您错过了“底部”一词后的标点符号“：”。更正后代码工作正常！【参考方案4】：

做起来很简单：

#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

【讨论】：

【参考方案5】：

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;

【讨论】：

【参考方案6】：

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

首先设置 html 和 body 的高度

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

我假设我们的应用具有column 行为，以防您需要添加标题、英雄或任何垂直对齐的内容。

创建间隔类

.spacer 
    flex: 1;

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

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

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

【讨论】：

以上是关于将页脚放置在具有固定页眉的页面底部的主要内容，如果未能解决你的问题，请参考以下文章

如何将页脚固定在页面底部

将页脚固定到页面底部

javascript 将页脚固定到页面底部

将页脚推到短页面的底部

如何在具有网格布局的空/整页上强制页脚位于页面底部

仅在滚动到底部时将页脚固定到底部

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

粘滞页脚

4.1 添加间隔

4.2 padding-bottom 和 box-sizing 的组合

添加标题

最后但并非最不重要！

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