粘性页脚

时间:2010-09-19 21:38:02

标签: html css

好的,我知道这个问题在许多情况下已经提出,似乎答案因个案而异。

这是我的情况,我使用蓝图网格系统,高级结构如下。

所以页脚有时会粘到底部,但是当content_container中没有足够的内容时,它就不会。此外,如果调整窗口大小,则行为是不可预测的。如果内容容器中的内容不多,那么页脚内的列表总是浮动到右边并中断,不知道为什么。

<html>
    <body>
        <div id='main_container' class='container'>
            <div class='header span-24 last'>
            </div>
            <div class='content_container span-24 last'></div>
        </div>
        <div class='footer'>
            <ul class='footer_link'>
                <li>faq</li>
                <li>terms</li>
                <!--etc -->
            </ul>
        </div>
    </body>
</html>

CSS:

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

* {
    margin: 0px;
}

#main_container {
    min-height: 100%;
    height: auto !important;
    height/**/: 100%;
 /* for IE6 */;
}

.footer {
    margin-top: -200px;
    background: #38385c none repeat scroll 0 0;
    height: 200px;
    position: relative;
}

.content_container {
    padding-bottom: 200px;
    background-color: white;
}

.footer_links {
    /*    overflow:hidden;*/
    /*text-align: left;*/
    /*float: left;*/
    /*clear: both;*/
    /*margin-left: 1em;*/
    height: 100%;
    padding-left: 0;
    white-space: nowrap;
    list-style-type: none;
}

.footer a {
    color: white;
    text-decoration: none;
}

.footer_links {
    /*    overflow:hidden;*/
    /*text-align: left;*/
    /*float: left;*/
    /*clear: both;*/
    /*margin-left: 1em;*/
    height:100%;
    padding-left: 0;
    white-space:nowrap;
    list-style-type: none;
}

.footer a {
    color:white;
    text-decoration:none;
}

1 个答案:

答案 0 :(得分:0)

这已经在这里多次回答了。查看this recent postpost by Matthew James Taylor是我去的地方。