django1.10开发博客（14）——页脚版权信息

通常在页面里面用footer标签写版权信息，只需要在base.html里面写成类似于下面的：

<div id="footer">Copyright © 2016 Yukin</div>

但会遇到一个问题：当页面内容较少时，footer部分会随着飘上来，处在页面的半腰中间，页面效果很不好。因此，如何把footer固定在页面底部就成为这一功能实现的最大（其实也是唯一）问题。参考了如何将页脚固定在页面底部，使用了方法一实现。

首先修改base.html。
使用容器“container”把body内除footer的部分都包起来，结构像下面这样：

<body>
    <div id="container">
        <div class="page-header">
            ... ...
        </div>
        <div class="content container" style="width: 100%">
            ... ...
        </div>
        <div class="fixed_div">
            ... ...
        </div>
    </div>
    <div class="col-md-10">
        <div id="footer">
            Copyright © 2016 Yukin
        </div>
    </div>
</body>

然后在blog.css里添加：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
#footer {
position:
absolute;
bottom: 0;
width: 100%;
height: 60px;/*脚部的高度*/ background: #6cf;
clear:both;
}

修改里面的content为：

.content {
    /*margin-left: 70px;*/
    margin-left: 120px;
    margin-right: 120px;
    margin-bottom: 50px;
    padding-bottom: 40px;/*高度等于footer的高度*/
    font-size: 15px; /*正文字体大小*/
}

原理就是先用容器“container”把除footer以外的所有内容都包含进来，设置一个最小高度，这样即使页面内容不足也会占据全部页面，而容器外的footer就被“挤”在最下面了。

其他方法原理类似，都是用容器container撑起页面内容，再规划footer位置。

通过上面这样操作，footer就能始终保持在页面最底部了，至于美化的工作就不多说了，css+html再实现就行了。

2016.10.10

django1.10开发博客（14）——页脚版权信息

推荐阅读更多精彩内容