用CSS固定footer在底部的疑问？-H5 Tutorial-php.cn

用CSS固定footer在底部的疑问？

WBOY

Release： 2016-06-07 08:44:34

Original

1446 people have browsed it

回复内容：

这个是css中比较经典的问题。

这里固定在底部包括两种情况，第一种是当页面内容尚未填充满的时候，页脚需要固定在底部，第二种是页面填充满后，页脚需要随页面内容的增加而填充在主体内容的下方。

由于受书写模式的影响，一般情况下无法直接将一元素置于垂直的某一位置，除非使之脱离普通流。而脱离普通流后就很难满足第二种要求，这种情况下也可借助js进行计算进行定位，但这种效果可能由于计算时间和浏览器渲染的问题发生跳动（没亲自试过）。因此，这里提供一种比较通用的，基于普通文档流的解决方法。

具体解决方案：直接来代码。

<code class="language-html"><span class="nt"></span>
<span class="nt"></span>
<span class="nt"><style><span class="na">type=</style></span><span class="s">"text/css"</span><span class="nt">></span>
<span class="nt">html</span><span class="o">,</span><span class="nt">body</span><span class="p">{</span><span class="k">height</span><span class="o">:</span><span class="m">100%</span><span class="p">}</span>
<span class="nc">.footer</span> <span class="p">{</span><span class="k">margin-top</span><span class="o">:-</span><span class="m">30px</span><span class="p">;</span><span class="k">height</span><span class="o">:</span><span class="m">30px</span><span class="p">;</span><span class="k">background-color</span><span class="o">:</span><span class="m">#eee</span><span class="p">;}</span>
<span class="nc">.wrap</span><span class="p">{</span><span class="k">min-height</span><span class="o">:</span><span class="m">100%</span><span class="p">}</span>
<span class="nc">.main</span><span class="p">{</span><span class="k">padding-bottom</span><span class="o">:</span><span class="m">30px</span><span class="p">;</span><span class="k">overflow</span><span class="o">:</span><span class="k">hidden</span><span class="p">;}</span>
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"></span>
    <span class="nt"><div> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">></span>
        <span class="nt"><div> <span class="na">class=</span><span class="s">"main"</span><span class="nt">></span>这里是网页的主体<span class="nt"></span>
</div></span>
    <span class="nt"></span>
</div></span>
    <span class="nt"><div> <span class="na">class=</span><span class="s">"footer"</span><span class="nt">></span>这里是页脚<span class="nt"></span>
</div></span>
<span class="nt"></span>
<span class="nt"></span>
</code>Copy after login

对于一个非根元素，如果其position值是relative或static（默认），包含块的设置为最近的块级框、表单元格或行内块祖先框的内容边界构成。
对于一个非根元素，如果其position值是absolute，包含块则由最近的position值不是static的祖先元素（可以是任何类型）。这个过程如下：
                       - 如果这个祖先是块级元素，包含块则设置为该元素的内边距边界；换句话说，就是由边框界定的区域。
                       - 如果这个祖先是行内元素，包含块则设置为该祖先元素的内容边界。在从左向右读的语言中，包含块的上边界和左边界是该祖先元素中第一个框内容区的上边界和左边界，包含块的下边界和右边界是最后一个框内容区的下边界和右边界。
                       - 如果没有祖先，元素的包含块定义为初始包含块。当footer的position设置为relative的时候，它的包含块就是leftcolumn，所以bottom的值设置为负（-100px）表示为远离leftcolumn下边框100px。
当footer的position设置为absolute的时候，它的包含块则为container，它的bottom值（-100px）所对应的是container的下边框，所以此时footer在container的下面，我照着你给的html和css做了一次，发现和你所说的“不会影响到最终结果”并不一样，footer的位置确实变化了。
而container的position值无论设置成relative还是position，它的包含块都是初始包含块，所以没有变化（这里是我自己猜的，或者它的包含块是body？）
另外，css中body部分的background少了一个“u”，#leftcolumn部分最后一个属性少了“；”。
本人也是刚学不久，望大家指正~

有试过position设置fixed么