Question

我正试图制作一个粘性页脚，但它并不适合我。

代码：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

为什么我的粘性页脚不起作用？

4 个答案: