Footer顾名思义页脚，如果内容多的时候在底部时感官很好，但是当内容变少（无法撑开一屏的时候）footer不固定在底部，影响美观，对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了，由于本人前端水平有限，耗费一点时间最后通过负边距实现了这个简单的功能，代码如下:
|
1
2
3
4
5
6
7
|
<div class="wrapper">
<p>博客地址:http://www.cnblogs.com/xiaofeixiang/</p>
<div class="replace"></div>
</div>
<div class="footer">
博客园-FlyElephant
</div>
|
设置CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
* { margin: 0;
}html,body { height: 100%;
}.wrapper { min-height: 100%;
height: 100%;
margin: 0 auto -202px;//通过负边距隐藏replace
}.footer,.replace { height:200px;//设置高度一致
}.footer { border: 1px solid #6AC5AC;
} |
无论页面内容长短可以满足开发需求~
本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4999141.html，如需转载请自行联系原作者