Question

我试图解决问题，但我没有成功。我的页脚，如果网站的内容和填充在页脚通常在底部，但如果我页面上的内容很少上升，因为我有2个不同的页脚，最后的页脚是白色然后我有一个巨大的我的第二个页脚下的空白区域。

我试图找到一个解决方案，当我在页面上的内容很少时，我的两个页脚爬升，但底部没有空白区域。

在我的第二个页脚后，我只想要页面的末尾，而不是一个巨大的空白区域。

我已经尝试在我的页脚底部用css做了：0，位置：固定，但到目前为止我没有成功达到我的目的。

有人有这个问题吗？你能帮忙吗？

我的jsfiddle与我的例子

我的HTML

<footer id="footer-container">


                <section id="footer1">

                    <div id="col">
                    <h1>Newsletter</h1>
                     <ul>
                         <li class="home"><i class="fa fa-home"></i> <a href="#">Write your email</a></li>
                     </ul>
                    </div>

                    </div>
                </section>
    <section id="footer2-container">
                    <div id="footer2">
                        <p>&copy; copyright</p>

                    </div>
                </section>
            </footer>

我的css：

#footer-container
{
    width:100%; 
    float:left; 
    background:#ccc; 
    margin-top:15px; 
    bottom:0;   
}

#footer1
{
    width:960px;
    margin:10px auto 0 auto;
    height:165px; 
}

#footer2-container
{
    width:100%; 
    height:60px; 
    float:left;
    background:#000;
    bottom:0;
    margin-top:15px;
}

#footer2
{
    width:960px; 
    margin:15px auto 0 auto;
}

#footer2 p
{

    color:#fff; 
    font-size:14px; 

}

我得到了什么： enter image description here

Answer 1

在position: absolute;

中添加#footer2-container

Working Fiddle

Answer 2

这是一个常见问题，因为最常见的解决方法有点棘手。

您不应该使用固定位置，因为在这种情况下，页脚将始终显示在屏幕上。

如果您将页脚的绝对位置设置为底部并将html和body的高度设置为100％，则内容（在容器中）将填充底部大小的填充，以便如果内容更多则不应重叠

以下是我如何处理它：

html, body {
    height: 100%;
}
.container {
    padding-bottom: 20px; /* if your footer height is 20px including paddings and margins */
}
.footer {
    position: absolute;
    bottom: 0px;
}

我的页脚问题后的空白区域

2 个答案: