html - 底部的粘性页脚没有重叠

Question

我试图让页脚贴在页面底部。 如果内容很小，页脚应该在浏览器的底部。内容和页脚之间的空间应该是空的。

我尝试了各种方法，但页脚仍然直接在内容下方，而不是在浏览器底部。

这是我的代码

<div id="content">        
    <a href="item.html">
        <div class="col-xs-12 col-md-6 col-lg-3 item">
            <div class="opacity"></div>
            <div class="box_bg">
                <h4 class="color1">Headline</h4>
                <p>Description</p>                    
            </div>
        </div>
    </a>
    <a href="item.html">
        <div class="col-xs-12 col-md-6 col-lg-3 item">
            <div class="opacity"></div>
            <div class="box_bg">
                <h4 class="color1">Headline</h4>
                <p>Description</p> 
            </div>
        </div>
    </a>
</div>
<footer class="bar bar-tab">        
    <a class="tab-item" href="#">
        Home
    </a>  
</footer>  

CSS:

#content{
    min-height: 100%;
}
footer{
    height: 50px;
    position: relative;
    bottom: 0;
}

Answer 1

如果我明白你想要什么，你需要让你的页脚位置:固定；并将 padding-bottom 添加到您的容器中。

正文将位于页脚后面，因此您需要略大于页脚高度的填充。

https://jsfiddle.net/c0Lrcg4s/

#content{
    min-height: 100%;
    padding-bottom:60px;
}
footer{
    height: 50px;
    position: fixed;
    bottom: 0;
}

你可以使用 position: absolute;但是，这不会正常工作，因为它的相对容器将是视口(viewport)，然后将随屏幕滚动。