div 自适应高度 自动填充剩余高度

方案1：

Html：

1 2 3 4

< div  class="outer">      < div  class="A"> 头部DIV </ div >      < div  class="B">下部DIV </ div > </ div >

CSS：

1 2 3 4 5

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：

1 2 3 4

< div  class="outer">      < div  class="A">头部DIV</ div >      < div  class="B">下部DIV</ div > </ div >

CSS：

1 2 3 4 5

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 ; }

效果：