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