上固定，下自适应
两行布局，上固定，下自适应
效果：
代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>上边固定，下面自适应</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <style type="text/css">
7 html{
8 padding-top:50px; /*上部设置为50px*/
9 -webkit-box-sizing: border-box;
10 -moz-box-sizing: border-box;
11 box-sizing: border-box;
12 overflow:hidden;
13 }
14 html,body{
15 margin:0;
16 height: 100%;
17 width:100%;
18 }
19 .top{
20 width:100%;
21 height:50px; /*高度和padding设置一样*/
22 margin-top: -50px; /*值和padding设置一样*/
23 background-color: #ff6600;
24 overflow: auto;
25 position:relative;
26 }
27 .main{
28 height: 100%;
29 width:100%;
30 overflow: auto;
31 background-color: #FFE69F;
32 }
33 </style>
34 </head>
35 <body>
36 <div class="top">
37 <p> 此布局仅适用于在body内布局 top 高度50px </p>
38 </div>
39
40 <div class="main">
41 <h3>下面自适应,此布局仅适用于在body内布局,main 高度自适应 </h3>
42 </div>
43 </body>
44 </html>
原文地址：https://www.cnblogs.com/ryanchancrj/p/9268985.html
时间： 2024-08-24 06:11:51