css高度填充剩余空間
阿新 • • 發佈:2018-08-29
col absolut float x11 html clas htm ace oat
bottom: 0px;
left: 0px;
} 3.js動態設置剩余高度 獲取main、nav高度,相減的content高度
<
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高度填充剩余空間