3

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

代码：http: //jsfiddle.net/PC8x7/1/

正如您在实时视图中看到的那样，页脚位于页面其余部分的下方，但您必须滚动才能到达那里。我怎样才能避免这种情况，并且只有在需要时才具有滚动条？

4

4 回答 4

4

你必须去掉主容器和标题中的边距

请参阅有关高度和边距的说明http://www.cssstickyfooter.com/using-sticky-footer-code.html

于 2011-06-14T17:06:15.957 回答
1

Your wrapper has min-height: 100%; and your footer is placed underneath the wrapper. The wrapper is 100% of the height of the page and the footer is put right underneath the page forcing the scroll.

There's a couple ways you can get around the issue. You can try putting the footer inside the wrapper, setting wrapper's position to relative, and absolute positioning the footer to the bottom.

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>
于 2011-06-14T17:02:25.133 回答
0

我假设您正在寻找位于页面底部的固定页脚？然后你需要设置它的样式，位置固定，底部为零

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>
于 2011-06-14T17:04:26.557 回答
-1

据我了解 - 你想把页脚放在窗口的底部吗？

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

方法 B. - 使用 100% 的包装高度、溢出和边框 http://www.quirksmode.org/css/box.html。您可以通过这种方式将页脚放在包装填充上

方法 C. - Javascript

于 2011-06-14T17:04:33.577 回答