html css div 高度自适应,HTML/CSS中，DIV高度自适应解决办法

获取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();

效果图