css - 使用 Bootstrap 固定页脚和内容填充器

Question

我想将页脚放在浏览器窗口的底部，并在必要时用容器填充空白部分(。这是我的结构:

<header>
    <div class='container'>
        ....
    </div>
</header>
<div id='wrap'>
    <div class='container'>
        <div class='white-background'>
            <div class='col-xs-12 col-sm-5 leftcontent'>[%leftcontent%]</div>
            <div class='col-xs-12 col-sm-7 maincontent'>[%maincontent%]</div>
        </div>
    </div>
</div>
<footer>
    <div class='container'>
        <div style='text-align: center; padding-bottom: 20px;'><h3>[%copyright%]</h3></div>
    </div>
</footer>

这是CSS:

#wrap {
    min-height: 100%;
    background-image:url('bk.gif');
    background-color: #2c3e50;
}

.white-background{
    width:100%;
    height:100%;
    display:block;
    overflow:auto;
    background-color: #fff!important;
}

footer{
    background-color: #f2f2f2;
    text-align:center;
    position: relative;
    margin-top: -50px;
    height: 50px;
    clear:both;
    padding-top:20px;
}

我做了一些尝试并查看了其他答案，但没有成功...

Answer 1

尝试添加第一个 stycky 页脚解决方案

http://ryanfait.com/html5-sticky-footer/