获取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();
效果图
如果觉得《html css div 高度自适应 HTML/CSS中 DIV高度自适应解决办法》对你有帮助，请点赞、收藏，并留下你的观点哦！
