html – 页面底部的位置页脚具有固定标题

我想将页脚定位在页面的底部，这个页面也有一个固定的页眉

>不与位置：固定 – 我不希望它保留在屏幕上，它应该是在页面的最后，并在滚动时表现正常。
>不在可见屏幕的底部 – 在页面的底部，即毕竟其他内容。

这是一个更好地解释的图表：

以下是代码：

>我准备了一个演示：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将使页脚与视口相对而非页面本身定位。因此，我们必须将元素保持在正常流程中，并以某种方式将其定位到页面的底部。

有几种方法来实现这一点，这些方法已经在野外讨论了。
例如：

> A List Apart的文章 Exploring Footers – 到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) – 到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>

需要以下步骤：

>设置< html>的高度和< body>元素到100％是下一步需要的1。
>我们需要做的最重要的事情是确保#content足够高以将#footer推到页面的下方。因此，我们给#content的最小高度为100％。
> So far，#content已经占据了视口的100％的高度，因此我们应该将页脚放在页面的底部。为了做到这一点，我们可以给#content一个负的边际底线相当于页脚的高度。还要确保页脚出现在内容的顶部，我们应该将页脚相对位置。 Demo Here。
>可以看出，当#内容由其内容增长时，一些内容会在页脚后面。我们可以通过在#content的末尾附加一个间隔元素来避免这种情况，也可以使用padding-bottom和box-sizing: border-box2的组合，这个值应该是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填充底部和箱子尺寸的组合

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

>但是如果它应该是绝对的3，我们需要按照to prevent overlapping的顺序推送#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;
}

Updated Example(请注意，由于简洁而省略了供应商前缀)

最后但并非不重要！

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

这是需要使min-height: 100%在#content元素上工作(因为百分比值相对于由< body>建立的框的包含块的高度)。另外< html>应该有一个明确的height使高度：100％在< body>上工作。

box-sizing: border-box使UA计算包括填充和边框在内的框的宽度/高度。

According to spec，绝对定位的元素是具有绝对或固定位置的元素。

html – 页面底部的位置页脚具有固定标题

解决方法

相关推荐