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

<!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>
原文地址:https://www.cnblogs.com/xiongbaobao/p/2393448.html