css如何实现footer定位（完整代码）

来源：易妖游戏网

本篇文章给大家带来的内容是关于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>

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务