为什么我的粘脚不工作？

Question

我试图做一个粘脚，但它不是很适合我。

CODE：http://jsfiddle.net/PC8x7/1/

正如你可以在实时取景看到，页脚来了页面的其余部分的下方，但你必须滚动到那里。我该如何避免这种情况，只有在需要时才有滚动条？

Answer 1

你必须在主容器和头

摆脱利润率看到高度和利润率http://www.cssstickyfooter.com/using-sticky-footer-code.html

的说明

Answer 2

您的包装已min-height: 100%;和您的页脚放置在包装下。包装是页面高度的100％，页脚正好放在页面下面，强制滚动。

有几种方法可以解决问题。您可以尝试将页脚放入包装中，将包装的位置设置为相对位置，并将页脚绝对定位到底部。

CSS：

.wrapper { 
    min-height: 100%; 
    position: relative; 
} 

.footer { 
    position: absolute; 
    bottom: 0; 
} 

.footer-link { 
    text-align: center; 
} 

HTML：

<div class="wrapper"> 
    ... 

    <div class="footer"> 
    <div class="footerlink"> 
     <p><span>&copy; Domain.tld</span> | </p> 
    </div> 
    </div> 
</div> 

Answer 3

我假定你正在寻找定位到页面的底部一个固定页脚？然后，你需要在零

position:fixed; bottom:0px; 

与位置固定，底部样式它应该也 - 在页面的底部 - 与相同的高度页脚空的鸿沟，所以当你需要滚动即可显示您的所有内容。

已更新如果您正在寻找页脚来关注内容并在缺少内容时将其定位在页面的底部。我更喜欢使用最小高度的黑客。

<style> 
* { 
    margin:0px; 
    padding:0px; 
} 
.page { 
    min-height:100%; 
    height: auto !important; // modern browser see this instead of the height: 100% 
    height: 100%; // IE sees this but allows block to expand. 
    position: absolute; 
    width: 100%; 
} 
</style> 

<div class="page"> 

<div style="height:100px; "> content</div> 
<div style="position:absolute; bottom:0px; "> 

Min height Hack to make page be at least 100% of screen size 
but if content is bigger then scroll bars appear and 
this information is under the content. Works with quick mode browsers. 

</div> 
</div> 

Answer 4

据我所知 - 你想把页脚放在窗口的底部？

方法A. - 使其位置：固定

方法B. - 玩弄包装高度100％，溢出和边界框 http://www.quirksmode.org/css/box.html。你可以把页脚在包装填充这样

方法C. - 的Javascript