table格局、div布局相上和向下展开折叠并且高度自适应 _Web前端

table布局、div布局相上和向下展开折叠并且高度自适应

项目中用到table布局，要求header能够向上折叠和展开、footer能够向下折叠和展开，并且content能够自适应浏览器的高度。经过一番测试，实现的代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>主页</title>
    <style type="text/css">
        html,body{
		margin:0px; 
		padding:0px; 
		width:100%; 
		height:100%;
	}
    </style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" style="height:100%; width:100%; table-layout:fixed;">
		<tr>
            <td id="header" style="height:77px;background:blue;">
            </td>
        </tr>
		<tr>
            <td style="height:12px;;background:yellow;" onclick="document.getElementById('header').style.display==''?document.getElementById('header').style.display='none':document.getElementById('header').style.display=''">
            </td>
        </tr>
		 <tr>
            <td id="content" style="background:red;vertical-align:top;height:auto;">
            </td>
        </tr>
		<tr>
            <td style="height:12px;;background:yellow;" onclick="document.getElementById('footer').style.display==''?document.getElementById('footer').style.display='none':document.getElementById('footer').style.display=''">
            </td>
        </tr>
		<tr>
            <td id="footer" style="height:139px;background:blue;">
            </td>
        </tr>
</table>
</body>
</html>

?注意：有一点body的css描述中必须有margin:0px;?padding:0px;否者的话，有可能导致content的高度不能自适应。

项目中用到div布局，要求三行单列，上下固定高度，中间自适应，中间内容过多时，出现滚动条。经过一番测试，实现的代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 <style>
	html,body {width:100%;height:100%;}
	* {margin:0;padding:0;}
	div {width:100%;}
 </style>
 
 </HEAD>

 <BODY>
  <div style="height:20%;background:red;"></div>
  <div style="height:70%;overflow-y:auto;background:#eee">
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />dadadada<br />
	dadadada<br />
	dadadada<br />dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	dadadada<br />
	</div>
  <div style="height:10%;background:green"></div>
 </BODY>
</HTML>

?项目中用到div布局，要求header能够向上折叠和展开、footer能够向下折叠和展开，并且content能够自适应浏览器的高度。最终采用css+js方式实现，能够兼容firefox和ie,对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式,对于ie通过js控制content的高度来实现，经过一番测试，实现的代码如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<style>
html,body{
	margin:0px;
	height:100%;
}
#wrapper{
	width:100%;
	height:100%;
	MARGIN: 0px auto;
	display:table;
}
#wrapper > div { 
	display:table-row; 
} 
#header{
	width:100%;
	height:77px;
	background-color:blue;
}
#content{
	width:100%;
	height:expression(document.body.clientHeight-240 + "px");
	background-color:red; 
}
#footer{
	width:100%;
	height:139px;
	background-color:blue;
}
</style>
<script>
	function setHeight(obj,hei){
		var objHeight = document.getElementById('content').style.height;
		objHeight = objHeight.substr(0,objHeight.length-2);
		objHeight = parseInt(objHeight);
		if(obj.style.display==''){
			document.getElementById('content').style.height =objHeight+hei+"px";
		}else{
			document.getElementById('content').style.height =objHeight-hei+"px";
		}
	}
</script>
<body>
<div id="wrapper">
	<div id="header">header</div>
	<div style="height:12px;;background:yellow;" onclick="setHeight(document.getElementById('header'),77);document.getElementById('header').style.display==''?document.getElementById('header').style.display='none':document.getElementById('header').style.display='';">&nbsp;</div>
	<div id="content">content</div>
	<div style="height:12px;;background:yellow;" onclick="setHeight(document.getElementById('footer'),139);document.getElementById('footer').style.display==''?document.getElementById('footer').style.display='none':document.getElementById('footer').style.display='';">&nbsp;</div>
	<div id="footer">footer</div>
</div>
</body>
</html>