Geek asks and answers

Why is my sticky footer not working?

I am trying to make a sticky footer, but this doesn’t quite work for me.

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

As you can see live, the footer is under the rest of the page, but you need to scroll to get there. How can I avoid this, and only if it has a scroll bar, when necessary?

+3
source share
4 answers

you need to get rid of the fields in the main containers and headers

see note on heights and fields http://www.cssstickyfooter.com/using-sticky-footer-code.html

+4
source

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

, , ?

position:fixed; bottom:0px;

, , , , .

Updated if you are looking for a footer to keep track of content and be located at the bottom of the page when there is a lack of content. I prefer to use the min-height handle.

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

As I understand it - do you want to set the footer at the bottom of the window?

Method A. - make his position: fixed

method B. - play with a wrapper height of 100%, overflow and frame http://www.quirksmode.org/css/box.html . You can put the footer on top of the wrapper this way

method C. - Javascript

-1
source

More articles:


All Articles