Html 页面footer 定位

 

               

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="http://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
 9     <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
10     <style>
11         html,
12         body {
13             width: 100%;
14             height: 100%;
15             margin: 0;
16             padding: 0;
17         }
18        * {
19             margin: 0;
20             padding: 0;
21         }
22         .box {
23             width: 100%;
24             min-height: 100%;
25             padding-bottom: 50px;
26             box-sizing: border-box;
27             background: #e4e4e4;
28         }
29         .content {
30             background: yellow;
31             border-bottom: 1px solid #999;
32         }
33         button {
34             margin: 10px auto;
35             line-height: 30px;
36             width: 20%;
37         }
38         footer {
39             height: 50px;
40             line-height: 50px;
41             text-align: center;
42             margin-top: -50px;
43             background: #fff;
44         }
45     </style>
46 </head>
47 <body>
48     <div class="box">
49         <button onclick="beLong()">变长</button>
50         <p class="content" id="content">内容</p>
51     </div>
52     <footer>footer</footer>
53 </body>
54 <script>
55     var temp = "内容";
56     $('#content').text(JSON.stringify(temp));
57     function beLong() {
58         document.getElementById('content').style.height = '1000px';
59     }</script>
60 </html>

 

posted @ 2021-04-14 09:23  陈小黑  阅读(151)  评论(0)    收藏  举报