Fixed footer at bottom of page [closed]

问题:

I want a fixed footer at the bottom of my page where I'm able to have one line of text (all text centered), just like this.

This is my current code.

I've tried using other tutorials, but none have worked.

How can I do this?

回答1:

I would recommend using Ryan Fait's sticky footer. It can accomplish what you are trying to do with pure CSS.

HTML:

<div class="wrapper">
    Content Here
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS:

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

.footer { /* centers the text */
    text-align: center; /* horizontal centering */
    line-height: 142px; /* vertical centering; should be equal to the footer height */
}

回答2:

Try changing the footer element and the preceeding hr element like this:

<footer style="position:fixed; left:0px; right:0px; bottom:0px;
      background:rgb(255,255,255); text-align:center;">
  <hr>
  <p>&copy; Company 2012</p>
</footer>

I think this more or less solves your problem. It doesn't work exactly as the footer at http://ryanfait.com/sticky-footer/, but as far as I understand your question this is what you want.

PS: The CSS should of course be put in the CSS-file.