获取content高度
*{color:#fff}
.header{
height: 40px;
width:100%;
position: fixed;
top:0;
left:0;
background-color: #006e54;
}
.footer{
height: 40px;
width:100%;
position: fixed;
bottom:0;
left:0;
background-color: #00a381;
}
#aside{
position: absolute;
margin:0;
left: 0;
top:40px;
bottom:40px;
width:100px;
background-color: #5c9291;
}
#content{
position: absolute;
margin:0;
left:100px;
top:40px;
bottom:40px;
background-color:#1f3134;
overflow: auto;
}
header
aside
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content\
content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content
footer
var winWidth = 0,winHeight = 0;
function changebleWidthHeight() {
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
document.getElementById("content").style.width = winWidth - 100;
document.getElementById("content").style.height = winHeight - 80;
document.getElementById("aside").style.height = winHeight - 80;
}
window.onresize = changebleWidthHeight();
效果图
