自适应为最高高度

如图： 实现left bar 和content 和right bar适应为最高高度的那块高度

直接上代码

 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></title>
 8     <style>
 9       * {
10         padding: 0;
11         margin: 0;
12       }
13       header {
14         background-color: #7ecef3;
15         width: 100%;
16         height: 100px;
17       }
18       footer {
19         background-color: #7ecef3;
20         width: 100%;
21         height: 100px;
22       }
23       main {
24         display: flex;
25         min-height: calc(100% - 200px);
26       }
27       main > div:nth-child(1) {
28         width: 200px;
29         background-color: #89c997;
30       }
31       main > div:nth-child(2) {
32         flex: 1;
33         background-color: #53b9be;
34       }
35       main > div:nth-child(3) {
36         width: 200px;
37         background-color: #89c997;
38       }
39     </style>
40   </head>
41   <body>
42     <header>header</header>
43     <main>
44       <div>left bar</div>
45       <div>
46         contet
47       </div>
48       <div>right barffg</div>
49     </main>
50     <footer>footer</footer>
51   </body>
52 </html>

 

posted @ 2020-01-15 23:00  gsq1998  阅读(205)  评论(0)  编辑  收藏  举报