<
div
id="main">
<
div
id="nav">nav</
div
>
<
div
id="content">content</
div
>
</
div
>
1.浮动特性(浮动元素部分脱离文档流:位置高于常规文档)
#main {
background-color
:
#999
;
height
:
100%
;
}
#nav {
background-color
:
#85d989
;
width
:
100%
;
height
:
50px
;
float
:
left
;
}
#content {
background-color
:
#cc85d9
;
height
:
100%
;
}
2.绝对定位 (盒模型)
#main {
position: relative;
background-color
:
#999
;
height
:
100%
;
}
#nav {
???background-color: #85d989;
???width: 100%;
???height: 50px;
}
#content {
???background-color: #cc85d9;
???width: 100%;
???position: absolute;
???top: 50px;
???bottom: 0px;
???left: 0px;
}
3.js动态设置剩余高度
获取main、nav高度,相减的content高度
css高度填充剩余空间
原文地址:https://www.cnblogs.com/justSmile2/p/9556618.html