底部粘滞的页脚没有重叠

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; 但是,这不会正常工作,因为它的相对容器将是视口,然后将随屏幕滚动.