方案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