根据内容调整页脚

时间:2010-06-25 04:20:57

标签: css position footer

我正在使用this网站。

目标:
我想根据每个页面的内容移动我的页脚。

1)如果有更多内容,那么我想把我的页脚放在内容之后 2)如果下图中没有这样的内容,我想将页脚固定在窗口屏幕的底部

alt text http://www.freeimagehosting.net/uploads/e893eac88b.png

我现有的CSS:

我目前在#content中使用min-height属性将页脚保持在底部。

#footer_outer{
    width:100%;
    background:#444;
    padding:10px 0 0 0;
    margin-top:50px;
    height: 130px;
}

#footer {
    margin:0 auto;
    width:834px;
    height:auto;
    overflow:hidden;
}

#content {
    padding:5px;
    margin:0 auto;
    width:890px;
    height:auto;
    min-height:450px;
}

body {
    font-family:'Helvetica Neue', helvetica, arial, sans-serif;
    color:#757575;
    font-size:14px;
    padding:0;
    margin:0;
    background:#FAFAFA;
}

请帮助我实现目标。非常感谢。

的问候, vaths

1 个答案:

答案 0 :(得分:1)

1。使用固定位置div

http://www.dailycoding.com/Posts/creating_always_visible_div_using_css.aspx

将CSS更改为

#footer {
    margin:0 auto;
    width:834px;
    height:auto;
    overflow:hidden;
    position: fixed;
    bottom: 0px;
}

2。如何将页脚保持在页面底部

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page