仅在 Firefox 中，页脚不会留在我网站的底部答案

【问题标题】：Footer won't stay at the bottom of my website in Firefox only仅在 Firefox 中，页脚不会留在我网站的底部
【发布时间】：2012-09-21 23:26:14
【问题描述】：

我有一个带页脚的网站，在 Chrome 和 Safari 中显示良好。

但是，当在 Mozilla Firefox 中查看时，页脚不在页面底部，而是在整个页面上，从页眉下方开始。

这与在 Firefox 中使用 and 标签有关吗？或者是其他东西。

<!doctype html>
<html>
    <head>
        Stuff.....
    </head>

    <body>
        <header>
            Stuff....
        </header>

        <div id="main_container">
            <div id="content_container">
                Text (h1, h2 and p tags)
        </div>

        <div id="networking_container">
            <div id="twitter">
                Twitter Feed...
            </div>

            <div class="fb-like" id="facebook" data-href="http://www.facebook.com/EtempaSolutions" data-send="true" data-layout="button_count" data-width="225" data-show-faces="false">
            </div>

            <g:plusone size="medium" annotation="inline" width="215"></g:plusone>
        </div>

        <footer>
            <table id="favourite_links_table" cellpadding="4">
                Stuff...
            </table>

            <div id="credits">
                <p id='main_credit'>This website has been designed and hosted by <a href='http://www.etempa.co.uk'>Etempa Solutions</a></p>

                <p id='sub_credit'>Web Design, Including Coding and Images © Copyright to Pippa Rose Smith 2012. All Rights Reserved</p>
            </div>
        </footer>
    </body>
</html>

css 位是：

html 
{ 
    padding: 30px 10px; 

    line-height: 1.4; 

    background-color: #CCC;

    -webkit-text-size-adjust: 100%; 

    -ms-text-size-adjust: 100%; 
}

html, input 
{   
    font-family: Candara, Verdana, Geneva, sans-serif; 
}

body 
{ 
    width: 860px; 

    padding: 20px 30px 20px;

    border: 1px solid #b3b3b3; 

    border-radius: 4px; 

    margin: 0 auto; 

    box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; 

    background: #fcfcfc; 
}

footer
{
    margin-top: 30px;
}

#main_container
{
    clear: both;

    padding-top: 15px;
}

#favourite_links_table
{
    text-align: center;

    width: 850px;
} 

#credits
{
    margin-top: 30px;
}

#main_credit
{
    color: #9933FF;

    font-size: 13px;

    text-align: center;
}

#sub_credit
{
    color: #9933FF;

    font-size: 12px;

    text-align: center;
}

#content_container
{
    float: left;

    width: 70%;
}

#networking_container
{
    float: right;

    width: 25%;
}

#twitter
{
    padding-top: 30px;

    padding-bottom: 20px;
}

#facebook
{
    padding-bottom: 20px;
}

【问题讨论】：

您错过了顶部的<html>，请同时提供您的css。
对不起，html标签按css添加
我在 Chrome 和 Firefox 中看起来一样 jsfiddle.net/j08691/UGg6d
谢谢，问题似乎出在主容器中……我已经添加了额外的代码。我不认为这是相关代码，但似乎是。

标签： html firefox cross-browser footer

【解决方案1】：

我找到了答案

我添加了 clear: both 到我的页脚，所以 css 现在是

footer
{
    margin-top: 30px;

    clear: both;
}

【讨论】：