CSS實現div填充剩余高度
阿新 • • 發佈:2018-04-10
tom AI con dfs pad AC alt 技術 高度
相信小夥伴們經常會遇到這個問題,我也是填了很多坑,查了很多資料,才解決的,下面我列出2個方法:
我們的需求如圖:
1:(這個方法不推薦使用,因為可能會因為設備不同,而出現未知BUG,特別是div出現padding的時候)
<div class="main"> <div class="title"></div> <div class="content"></div> </div>
.main{width: 100%;height: 100%;} .title{ width: 100%; height: 80px; background: #29f0bf; } .content{ padding:0 32px; position: absolute; width:calc(100% - 64px); height: calc(100% - 80px); background: #f09529; }
2:(推薦使用該方法)
<div class="main"> <div class="title"></div> <div class="content">sddfsfsdf15646</div> </div>
.main{width: 100%;height: 100%;} .title{ width:100%; height: 80px; background: #29f0bf; } .content{ padding: 0 32px; width: calc(100% - 64px); position: absolute; top: 80px; bottom: 0px; left: 0px; background: #f09529; }
***************************************** END ***************************************************
CSS實現div填充剩余高度