flex全屏布局

本文轉載自查看原文 2019-12-23 10:46 1414 CSS

 1      *{
 2             margin:0;
 3             padding:0;
 4         }
 5         html,body{
 6             height:100%;
 7         }
 8         .wrap{
 9             display:-webkit-box;
10             display:-webkit-flex;
11             display:-ms-flexbox;
12             display:flex;
13             -webkit-box-orient:vertical;
14             -webkit-flex-direction:column;
15             -ms-flex-direction:column;
16             flex-direction:column;
17             width:100%;
18             height:100%;
19         }
20         .header,.footer{
21             height:40px;
22             line-height:40px;
23             text-align: center;
24             color: #fff;
25             background-color:#379aeb;
26             text-align:center;
27         }
28         .main{
29             -webkit-box-flex:1;
30             -webkit-flex:1;
31             -ms-flex:1;
32             flex:1;
33             width:100%;
34             height: 200px;
35             overflow: auto;
36         }

1 <div class="wrap">
2     <div class="header">header</div>
3         <div class="main">
4             內容區域<br>
5             內容區域<br>
6             內容區域<br>
7         </div>
8    <div class="footer">footer</div>
9 </div>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 flex布局 flex布局 Flex布局 flex布局 flex布局 Flex布局 Flex布局 flex布局 Flex布局 flex布局