<!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>
效果圖
