您的位置：首页 > 其它

实现三行布局页面自适应不同分辨率下的屏幕高度

2012-03-13 11:12 281 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0; }
#pageHead { background-color:#CC00FF; height:100px; }
#pageBody { background-color:#9966CC; }
#pageFoot { background-color:#996666; height:50px; }
</style>
</HEAD>
<BODY style='overflow:hidden;' onload='get_height();'>
<div id='pageHead'>Head</div>
<div id='pageBody' style='overflow:auto;'>Body<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id='pageFoot'>Foot</div>
<script>
function get_height(){
var page_height = document.body.clientHeight;
var head_height = document.getElementByIdx_x('pageHead').clientHeight;
var foot_height = document.getElementByIdx_x('pageFoot').clientHeight;
document.getElementByIdx_x('pageBody').style.height = page_height - head_height - foot_height;
}
window.onresize = get_height;
</script>
</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航