div 自適應高度 自動填充剩餘高度

方案1：

Html：

< div  class="outer">

     < div  class="A"> 頭部DIV </ div >

     < div  class="B">下部DIV </ div >

</ div >

CSS：

html,

body {  height :  100% ;  padding :  0 ;  margin :  0 ; }

.outer {  height :  100% ;  padding :  100px  0  0 ; box-sizing: border-box ;  position :  relative ; }

.A {  height :  100px ;  background :  #BBE8F2 ;  position :  absolute ;  top :  0  ;  left :  0  ;  width :  100% ; }

.B {  height :  100% ;  background :  #D9C666 ; }

效果：

 

方案2：

HTML：

< div  class="outer">

     < div  class="A">頭部DIV</ div >

     < div  class="B">下部DIV</ div >

</ div >

CSS：

html,

body {  height :  100% ;  padding :  0 ;  margin :  0 ; }

.outer {  height :  100% ;  padding :  100px  0  0 ; box-sizing: border-box ; }

.A {  height :  100px ;  margin :  -100px  0  0 ;  background :  #BBE8F2 ; }

.B {  height :  100% ;  background :  #D9C666 ; }

效果：

 

文章轉自：https://www.cnblogs.com/pangguoming/p/5695184.html