JS+CSS实现的自适应高度


JS+CSS实现的自适应高度，看上去不错，以前都是用纯CSS实现，感觉再怎么做都是不太理想，想必配合JS估计能得到另人满意的效果，点击运行代码看一下？应该是完全自适应了高度，不论你浏览器多大，它都会跟着变化！

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自适应高度</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:10px;}
#ididid{background:#0066cc;}
</style>
</head>
<body>
<div id="ididid"></div>
<script type="text/javascript">
function autoHeight(){
if (window.innerHeight){//FF
	nowHeight = window.innerHeight;
}else{
	nowHeight = document.documentElement.clientHeight;
}
	var jianHeight = 60;
if(nowHeight > jianHeight){
	document.getElementById('ididid').style.height = nowHeight - jianHeight + 'px';
}else{
	document.getElementById('ididid').style.height = jianHeight + 'px';
}
}
autoHeight();
window.onresize = autoHeight;
</script>
</body>
</html>

上一个：CSS打造的边框折角效果
下一个：未知宽度的CSS水平居中

更多图片编程知识: