粘性页脚不放在底部

我只是对页脚进行了一些快速更改。粘性页脚不放在底部

页脚需要粘性，我按照A List Apart方法描述的方法尝试让页脚留在底部，但它似乎只是一点点关闭。

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

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

来源

2013-02-14 rowefx

我总是使用CSSStickyFooter method。

HTML，基本骨架

<div id="wrap"> 

    <div id="main"> 

    </div> 

</div> 

<div id="footer"> 

</div>

CSS，这仅仅是一个片断

* {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;}

来源

2013-02-14 14:54:51

我想你应该添加到#wrapper指定clearfix，增加高度： 100％到#wrapper和#container在这种情况下，你会看到底部应该是。现在您应该将页脚设置为负高度，并且它应该可以工作。博我不知道它是否会涵盖包装的内容。

来源

2013-02-14 15:39:59 kspacja

我检查了它。它将涵盖内容。但有了这个内容，它应该是很好的工作。作为绝对定位。如果你将有更多的内容只留下页脚没有任何定位。 – kspacja 2013-02-14 16:11:16

如果我不添加任何定位，它将不会在主页底部。 Urgh！正如你所说，我已经添加了clearfix来包装。 – rowefx 2013-02-14 16:19:36

如果内容大于高度，我将会是。 – kspacja 2013-02-15 10:42:40

粘性页脚不放在底部

回答

相关问题