2021-8-4 前端達人
第一種，老套路，浮動大法
代碼：
效果圖：
綠色DIV占滿了外層DIV
第二種：calc CSS計算
這里在類名為div2的DOM外又加了一層div，主要就是為了說明，如果利用calc(100% - 50px);這種模式，那么這個DIV的父元素必須指定高度，可以是具體值，也可以是百分比，特別是dom結構嵌套很深的時候，特別好用。
第三種，彈性盒 子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> *{ margin:0; padding:0; } .parent{ width:100vw; height:100vh; display:flex; flex-flow:column nowrap; overflow:hidden; } .a{ height:50px; background:red; } .b{ flex:1; background:green; } </style> <body> <div class="parent"> <div class="a"></div> <div class="b"></div> </div> </body> </html>
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
