将页脚保持在内容以下的问题 [英] 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.

我的页脚布局是:

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

我的样式表:

#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.

如何使页脚保持在内容以下?我愿意接受任何JavaScript解决方案.

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

FIDDLE (因为它是WordPress，所以我无法复制所有内容)

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

进行了一些编辑.仍然不能改变我的问题.

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

推荐答案

您要描述的是位于内容底部的页脚.在页脚div中定义内容是不需要的信息.我们可能会在页脚中放置一个钻石独角兽.真正需要的信息是基本布局，也就是标题区域，内容区域，侧边栏区域，页脚区域.

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.

这是此操作的实时演示 http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

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;
}

您需要一个将占据视图区域的容器，并将页脚div设置为该容器的绝对底部，它将位于底部.内容正文"将根据需要扩展容器，并且每次页脚都将位于内容正下方的底部.div默认情况下具有display:block，因此它们每次都会推送到下一行.

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.

这篇关于将页脚保持在内容以下的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！