粘贴页脚不放置在底部 [英] Sticky footer is not placed at the bottom

问题描述

我只是对页脚进行了一些快速更改。

I'm just making some quick changes to the footer.

页脚需要是粘的，我遵循 A List Apart 方法尝试让页脚停留在底部，但它似乎关闭了一点。

The footer needs to be sticky, i was following the method described by A List Apart method to try get the footer to stay at the bottom, but it seems to be off just a little bit.

html, body {
height: 100%;
 }
#container {
position: relative;
min-height: 100%;
}

<div id="container">
    <div id="content">...</div>
    <div id="footer">...</div>
</div>

推荐答案

我总是使用 CSSStickyFooter方法。

• HTML，a基本骨架

• HTML, a basic skeleton

<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>          

CSS，这只是一个片段

CSS, this is only a snippet

* {margin:0;padding:0;} 

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;} 

这篇关于粘贴页脚不放置在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！