<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gbk">
<title>获取content高度</title>
<style>
*{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;
}
</style>
</head>
<body>
<div class="header">
header
</div>
<div id="aside">
aside
</div>
<div id="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 content
</div>
<div class="footer">
footer
</div>
<script>
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();
</script>
</body>
</html>
效果图