html - 页脚位置固定在页面底部-6ren

html - 页脚位置固定在页面底部

转载作者：技术小花猫更新时间：2023-10-29 11:58:30

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

不能与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将相对于视口(viewport)而不是页面本身定位页脚。因此，我们必须使元素保持正常流动，并以某种方式将其放置在页面底部。

有两种方法可以实现这一目标，这些方法在当时进行了广泛讨论。
例如:

A List Apart的文章Exploring Footers-作者:Bobby Van Der Sluis，2004年

footerStickAlt-by Craig Erskine，2005

Sticky Footer-通过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-通过Chris Coyier，2009

Sticky CSS footers: The flexible way(使用CSS Tables)-由Torben Haase撰写，2011年

Responsive Sticky Footer(Torben方法的改进版)-Joshua Cook，2013年

Solved by Flexbox的Sticky Footer-通过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>

需要执行以下步骤:

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

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

So far，#content已采用视口(viewport)高度的100%，因此我们应将页脚向上拉以将其定位在页面底部。为此，我们可以给#content一个与页脚的margin-bottom等效的负height。另外，为了确保页脚出现在内容的顶部，我们应该对页脚position进行relative。 Demo Here 。

可以看到，当#content随其内容增长时，某些内容会在页脚后面。我们可以通过在#content的末尾添加一个spacer元素或使用padding-bottom和 box-sizing: border-box 2的组合(也应该是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;
}

(请注意，由于简洁起见，省略了供应商前缀)

添加标题

如果 header 应在正常流中保持，则可以将其简单地添加到#content中，如下所示:
( Example Here )
<div id="content"> <div id="header">Header</div> ...

但是，如果应该将定位在绝对 3位置，则需要按to prevent overlapping的顺序向下推送#content元素的内容。

因此，同样，我们可以在#content( Example Here )的开头添加一个空格:
<div id="header">Header</div> <div id="content"> <div class="header-spacer"></div>  <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; /* 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 (请注意，由于简短起见，省略了供应商前缀)

最后但并非不重要!

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

1.这是使 min-height: 100% 在#content元素上工作所必需的(因为百分比值相对于盒子的包含块的height由<body>建立)。另外，<html>应该有一个明确的 height ，以使height: 100%可以在<body>上使用。

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

3. According to spec绝对定位的元素是position或absolute的元素。

关于html - 页脚位置固定在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18469262/

全站热门文章

首页

博学

6Ren·AI

商城

html - 页脚位置固定在页面底部