table布局、div布局相上和向下展开折叠并且高度自适应
<!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='';"> </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='';"> </div><div id="footer">footer</div></div></body></html>?