A君有阵子没写前端代码了 今天看了下flex layout 觉得真的很方便 以前要js解决的 几行配置就可以搞定了!
上代码
<html> <head> <meta charset="utf-8"> <meta name="google" value="notranslate"> <style> .hbox { display: flex; } .vbox { display: flex; flex-direction: column; } * { box-sizing: border-box; } </style> </head> <body style="background: rgb(255, 255, 255);"> <div style="display: flex; height: 100%;"> <div style="width: 100px;background: coral;height: 100%;"></div> <div class="vbox" style=" flex-grow: 1; height: 100%; background: beige; "> <div style=" height: 100px; border: 5px solid darkgray; "></div> <div style=" border: 5px solid cadetblue; flex-grow: 1; "></div> </div> </div> </body> </html>
大功告成~~