弹性盒之圣杯式布局

 1 <body>
 2     <div class="container">
 3         <header></header>
 4         <main>
 5             <nav>主体内容的左边固定不变</nav>
 6             <section>主体内容的中间部分随着屏幕的改变而改变</section>
 7             <aside>主体内容的右边固定不变</aside>
 8         </main>
 9         <footer></footer>
10     </div>
11 </body>

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         html,body{
 7             width: 100%;
 8             height: 100%;
 9         }
10         .container{
11             width: 100%;
12             height: 100%;
13             /* 给最外层大盒子开弹性盒 */
14             display: flex;
15             /* 切记不要忘了设置方向 不然顶部和头部就在一行显示了 */
16             flex-direction: column;
17         }
18         header{
19             /* 给头部设置固定的高度 */
20             width: 100%;
21             height: 50px;
22             background: red;
23         }
24         main{
25             /* 给主体部分设定flex 为1  达到上下变化中间随着变化 */
26             width: 100%;
27             height: calc(100% - 90px);
28             flex: 1;
29             /*  开弹性盒的目的是让里面内容达到 左右固定不动中间变化 */
30             display: flex;
31         }
32         nav{
33             width: 80px;
34             height: 100%;
35             background: pink;
36             flex:0;
37         }
38         aside{
39             width: 80px;
40             height: 100%;
41             background: pink;
42             flex: 0;
43         }
44         section{
45             flex: 1;
46             height: 100%;
47             background-color: blue;
48         }
49         footer{
50             /* 给尾部也设定固定的高度 */
51             width: 100%;
52             height: 40px;
53             background-color: green;
54         }
55     </style>

一条不甘于平凡的咸鱼分享