本篇文章给大家带来的内容是关于css如何实现footer定位（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
css实现footer定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script> <style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } *{ margin: 0; padding: 0; } .box{ width: 100%; min-height: 100%; padding-bottom: 50px; box-sizing: border-box; background: #e4e4e4; } .content{ background: #fff; border-bottom: 1px solid #999; } button{ margin: 10px auto; line-height: 30px; width: 20%; } footer{ height: 50px; line-height: 50px; text-align: center; margin-top: -50px; background: #fff; } </style> </head> <body> <div class="box"> <button onclick="beLong()">变长</button> <p class="content" id="content">内容</p> </div> <footer>footer</footer></body><script> function beLong() { document.getElementById('content').style.height = '1000px'; }</script> </html>相关推荐：
深入理解CSS3中transition的使用方法
如何通过CSS中Sprites实现切图技术（附代码）
