###总结
1.footer必须是一个独立的结构，与wrap没有任何嵌套关系
2.footer要使用margin为负来确定自己的位置
3.wrap区域必须要被自己的子元素撑开
4.如果真的想在wrap区域外添加其他结构，这个结构必须定位
<!DOCTYPE
html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0,user-scalable=no"
>
<
title
>
Title
</
title
>
<
style
type=
"text/css"
>
*
{
margin
:
0
;
padding
:
0
;
}
html
,
body
{
height
:
100
%;
}
#wrap
{
width
:
100
%;
min-height
:
100
%;
background
:
pink
;
}
#main
{
background
:
yellowgreen
;
padding-bottom
:
50
px
;
}
#footer
{
margin-top
: -
50
px
;
background
:
yellow
;
width
:
100
%;
height
:
50
px
;
line-height
:
50
px
;
text-align
:
center
;
}
</
style
>
</
head
>
<
body
>
<
div
id=
"wrap"
>
<
div
id=
"main"
>
main
<
br
>
main
<
br
>
main
<
br
>
main
<
br
>
</
div
>
</
div
>
<
div
id=
"footer"
>
footer
</
div
>
</
body
>
</
html
>
