21

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

  • 不是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;
}
4

6 回答 6

36

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

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

粘性页脚

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

考虑以下结构：

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

需要以下步骤：

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

  2. 我们需要做的最重要的事情是确保#content足够高以将#footer页面向下推。因此我们给出的#contenta min-height。100%

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

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

4.1 添加垫片

示例在这里

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

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

4.2padding-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. 如果标题应保持正常流程，您可以简单地将其添加到#content如下：（
    示例此处）

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

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

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

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

最后但并非不重要！

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

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

2.box-sizing: border-box让UAs计算盒子的width/ height，包括填充和边框。

3.根据规范，绝对定位元素是具有positionofabsolute或的元素fixed。

于 2013-08-27T15:24:15.040 回答
3

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

这是我修改后的一点： JSFiddle 更新

添加一个容器 div：

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

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

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

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

于 2013-08-27T15:20:47.693 回答
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，这是很容易确保的。

于 2013-12-28T19:58:22.103 回答
0 
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;
}
于 2015-01-22T06:08:18.513 回答
0

做起来很简单：

#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

于 2013-08-27T16:50:34.820 回答
0

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

  1. 首先为您的 html 和 body 设置高度
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

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

  1. 创建间隔类
.spacer {
    flex: 1; 
}
  1. 因此，稍后您的 HTML 可能类似于
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

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

于 2018-12-14T20:23:33.443 回答