Question

我有这个架构：

<div id="container">

    <div id="content">some text</div>

    <footer> my footer things </footer>

</div>

和我的css：

body {
    font-family:'Open Sans', sans-serif;
    background:url(../imagens/fundo_cima.jpg) top center no-repeat;
    background-color: #bac8e3;
    color:#000;
    font-size:12px;
    height:100%;    
}

#container{
    width:100%;
    min-height:100%;
}

#content{
    width:990px;
    min-height:526px;
    margin:0 auto;  
}

footer{
    position: absolute;
    bottom:0;
    width:100%;
    height:231px;
    background:url(../imagens/fundo_baixo.jpg) center no-repeat;
}

我的问题：在小分辨率（1024x768）中，页脚正在徘徊content div，在大分辨率下，这很有效......我需要设置什么？

Answer 1

我很幸运使用这个教程/代码。 http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Answer 2

您可能希望在#content div上添加一个边距，以便为页脚腾出空间。

#content{
    width:990px;
    min-height:526px;
    margin:0 auto 231px auto;  
}

像页脚一样的绝对定位元素会自然地悬停在其余内容上。如果你想避免这种影响，最简单的方法是让其他元素通过填充或边距为它们留出空间。

div始终在内容之后，始终在底部

2 个答案: