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

问题描述

| 我正在尝试添加页脚，但对我来说效果不佳。 代码：http：//jsfiddle.net/PC8x7/1/ 正如您在实时视图中看到的那样，页脚位于页面其余部分的下面，但是您必须滚动才能到达那里。如何避免这种情况，只在需要时才具有滚动条？     

解决方法

        您必须摆脱主容器和标题中的边距 请参阅有关高度和边距的注释http://www.cssstickyfooter.com/using-sticky-footer-code.html     ,        包装器有has0ѭ，而页脚位于包装器下方。包装器是页面高度的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>

    ,        我假设您正在寻找页面底部的固定页脚？然后您需要使用固定的位置和底部为零的样式

position:fixed; bottom:0px;

您还应该-在页面底部-与页脚高度相同的空分隔，以便在需要滚动时可以显示所有内容。 如果您希望页脚跟随内容并在缺少内容时位于页面底部，请进行更新。我更喜欢使用最小高度hack。

<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>

    ,        据我了解-您想将页脚放在窗口底部吗？ 方法A.-定位：固定 方法B。-在包装高度为100％的情况下玩耍，溢出并带有边框 http://www.quirksmode.org/css/box.html。您可以通过这种方式将页脚放在包装纸上 方法C。-Javascript