码迷,mamicode.com
首页 > 其他好文 > 详细

布局问题: ( 头部,底部固定,并且头部吸顶,底部吸底,中间自适应(内容多可以scroll))

时间:2019-03-20 13:13:27      阅读:493      评论:0      收藏:0      [点我收藏+]

标签:oct   rect   direct   st3   char   cti   meta   pat   column   

 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   <style>
 9     html,body,ul,li,p{
10       margin: 0;
11       padding: 0;
12     }
13     html,body{
14       height: 100%;
15       display: flex;
16       flex-direction: column;
17     }
18     .header,.footer{
19       height: 100px;
20       background-color: #3a9;
21     }
22     .body{
23       /* flex: 1; */
24       flex-grow:1;
25       flex-shrink:1;
26       flex-basis: 0;
27       overflow: scroll;
28       background-color:yellow;
29     }
30     .test1{
31       height: 300px;
32     }
33     .test2{
34       height: 300px;
35       background-color: coral;
36     }
37     .test3{
38       height: 300px;
39       background-color: green;
40     }
41   </style>
42 </head>
43 <body>
44   <div class="header"></div>
45   <div class="body">
46     <div class="test1">1</div>
47     <div class="test2">2</div>
48     <div class="test3">3</div>
49   </div>
50   <div class="footer"></div>
51 </body>
52 </html>

 

布局问题: ( 头部,底部固定,并且头部吸顶,底部吸底,中间自适应(内容多可以scroll))

标签:oct   rect   direct   st3   char   cti   meta   pat   column   

原文地址:https://www.cnblogs.com/gaoxuerong123/p/10564209.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!