3

I'm trying to make a sticky footer, but it's not quite working for me.

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

As you can see in the live view, the footer comes underneath the rest of the page but you have to scroll to get there. How can I avoid this, and only have it have a scroll bar when it needs to?

4

4 に答える 4

4

you have to get rid of the margins in the main containers and headers

see the note about heights and margins 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

I assume you are looking for a fixed footer positioned off the bottom of the page? Then you need to style it with position fixed and bottom at zero

position:fixed; bottom:0px;

You should also have - at the bottom of the page - a empty divide with the same height as the footer so when you need to scroll you can display all your content.

Updated if you are looking for the footer to follow the content and be positioned at the bottom of the page when there is a lack of content. I prefer to use the min-height 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>
于 2011-06-14T17:04:26.557 に答える
-1

As i understand - you want to put footer on the bottom of the window ?

method A. - make it position: fixed

method B. - play around with wrapper height 100%, overflow and border-box http://www.quirksmode.org/css/box.html . You can put footer over wrapper padding this way

method C. - Javascript

于 2011-06-14T17:04:33.577 に答える