html - 即使使用了此处列出的 CSS，页脚仍会 float 到顶部

Question

我已经尝试了本网站和其他网站上列出的所有 CSS，但无法让我的页面上的页脚出现在底部...现在它 float 在页面的上半部分。下面是我的 CSS；它可能有很多额外的东西，因为我已经尝试了一切，这是我的第一个网站。

参见:www.medsocialgroup.com

谢谢!

CSS

<!-- language: lang-css -->

body {
    text-align: center;
    background-color: #FFF;
    font-family: Verdana, Geneva, sans-serif;
    color: #333;
    background-image: url(dropshadow.jpg);
    background-repeat: repeat-y;
    background-position: center center;
    margin:0;
    padding:0;
    height:100%;
}

div.wrapper
{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top:20px;
    width:790px;
    min-height:100%; 
    height:auto
    height: 100%
    background-color: #FFF;
    font-family: Verdana, Geneva, sans-serif;
}
#medcommunity{
    font-size:36px;
    color: #999;
    }
#left_column{
    float:left;
    margin-left:0px;
    width:390px;
    height:420px;
    border-right-width: thin;
    border-right-style: double;
    border-right-color: #CCC;

}
#logo{
    float:left;
    clear:left;
    margin-top:100px;
    margin-left:0px;
}

#right_column{
    float:right;
    padding:0;
    width:385px;
    height:420px;
    font-family: Verdana, Geneva, sans-serif;
    color: #333;
    font-size: 16px;
    text-align: left;


}
#webtext{
    margin-top:75px;
    font-size: 20px;
}

#menu{
    background-color:#CCC;
    width:100%;
    height:40px;
    margin-top:50px;
    padding-top: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 20px;
    font-weight: lighter;
    text-align: center;
    background-position: center center;
    color: #FFF;
}

#footer{
    background-color:#CCC;
    width: 100%;
    height:50px;
    color: #CCC;
    border-top-width: thin;
    border-top-style: double;
    border-top-color: #999;
    text-align: center;
}

Answer 1

如果您在页脚 div 上使用 clear:both;，这将有助于将页脚推到底部，但由于某种原因它仍然不会一直向下，我不知道不知道为什么。

此外，如果您使用以下规则而不是我上面建议的 clear:both;，

#footer {
    background-color: #CCCCCC;
    border-top: thin double #999999;
    color: #CCCCCC;
    height: 50px;

    /* Try these new ones */
    left: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}

页脚似乎落到底部了。但这只适用于 Firefox 5，我在 Chrome 中尝试过，但它在那里不起作用。我尝试了 position: fixed;，就像 Chrome 和 Firefox 5 中建议的@mu 一样，它有点管用，但你必须指定 width: 100%。这样做的问题是页脚固定在浏览器视口(viewport)的底部，因此如果您调整浏览器的大小并缩短窗口，则页脚会随着视口(viewport)的底部边缘移动，我认为您不希望这样。