HTML/CSS中，DIV高度自适应解决办法


<!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>
HTML/CSS中，DIV高度自适应解决办法

猜你喜欢
