Troubles with keeping footer below content

问题

I'm currently having a few issues keeping my footer at the bottom of the page and below the content. I currently have it sitting at the bottom of the page, just keeping it below the content seems to be the issue.

My footer layout is:

#footer
    #footer-content
        p.copyright
        p.credit
    /#footer-content
/#footer

My stylesheet:

#footer {
    overflow: hidden;
    clear: both;
    max-width: 940px;
    padding-top: 26px;
    border-top: 1px solid #bbb;
    color: #aaa;
    position: fixed;
    height: 80px;
    width: 50%;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding-bottom: 0;
    text-align: center;
}
#footer-content {
    width: 100%;
}

Setting position to absolute makes the whole footer disappear somewhere off the page so I can't just change that.

What can I do to keep my footer below the content? I'm open to any JavaScript solutions.

FIDDLE (Since it's WordPress I can't copy over everything)

EDIT:

Made a few edits. Still doesn't change my problem.

回答1:

What you are describing is a footer that's on the bottom of the content. Defining the stuff in your footer div is unneeded information. You could have a diamond unicorn in the footer for all we care. The real information that's needed is the basic layout aka header region, content region, sidebar regions, footer region.

here is a live demo of what this will do http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

This will expand the content on short content to push the footer to the bottom. for longer content the footer is under the content as the content gets bigger.

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html,body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

You need a container that will take up the view area and by setting the footer div to the absolute bottom of the container it will be on the bottom. the content "body" will expand the container as needed and the footer will be on the bottom just under the content every time. divs by default have a display:block so they will push to the next line every time.

回答2:

I use this code across any websites that I make and it works for me -

#footer{
    display: block;
    text-align: center;
    font-size: 0.75em;
    bottom:0;
    width: 100%;
    height: 30px;
    position: fixed;
}

回答3:

I would believe that all your position: fixed is causing the problem, so I've tried cleaning it up for you in this JSFiddle.

The position: fixed; sets the divs position relative to the browser-window, and not the page.

回答4:

I have editted your JSFiddle to apply a 'sticky footer'.

Your document structure had to change for that:

body
  #container
    ...content...
    #wrap-push
  #footer

added this css:

html, body {
    height: 100%;
}
#container
{
    height: 100%;
    margin-bottom: -107px;
}
#wrap_push
{
    height: 107px;
}
#footer
{
    height: 80px;
}

来源：https://stackoverflow.com/questions/25870365/troubles-with-keeping-footer-below-content

标签

html

css