我们在浏览网页的时候经常在页脚看到用小字写的“Copyright © 2009-2016 WEIBO”之类的版权信息,在这里我们可以标明网页的版权,所属权,设计单位/人等。
通常在页面里面用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