CSS实现高度和宽度自适应
其实用绝对定位也可以实现高度和宽度的自适应，从而出现自适应大小的区域及滚动条。
<!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" style="height:100%;"> <head runat="server"> <title>Hello</title> <style type="text/css"> * { margin:0px; padding:0px; border-width:0px; font-size:12px; } ul { list-style-type:none; } #toolbar li { padding:2px; text-align:center; cursor:pointer; } #toolbar li:hover { background:url(images/_down.png) no-repeat center center; } </style> <script type="text/javascript"> window.onload = function () { document.getElementById("testImage").src = "../modelimage/11111111111601041701000301.GIF"; } </script> </head> <body style="height:100%;"> <form id="form1" runat="server" style="width:100%;height:100%;"> <div style="width:100%; height:100%; position:relative;"> <div id="header" style="position:absolute;left:0px;top:0px;height:40px;width:100%;background-color:#2964A0;color:White;vertical-align:middle;"> banner<img alt="logo" src="images/lg.png" style="float:right;" /> </div> <div id="left" style="position:absolute;left:0px;top:40px;bottom:25px;width:35px;background-color:#F3F4F6;border-right:1px solid gray; vertical-align:top;overflow:hidden;"> <ul id="toolbar"> <li><input type="button" title="评语" style="background-image:url('images/icon1.png'); border:1px solid transparent;background-color:transparent;width:29px;height:20px;cursor:hand;" /></li> <li><input type="button" title="对号" style="background-image:url('images/icon4.png'); border:1px solid transparent;background-color:transparent;width:29px;height:23px;cursor:hand;" /></li> <li><input type="button" title="半对" style="background-image:url('images/icon3.png'); border:1px solid transparent;background-color:transparent;width:28px;height:28px;cursor:hand;" /></li> <li><input type="button" title="错号" style="background-image:url('images/icon2.png'); border:1px solid transparent;background-color:transparent;width:29px;height:23px;cursor:hand;" /></li> <li><input type="button" title="快捷打分" style="background-image:url('images/icon5.png'); border:1px solid transparent;background-color:transparent;width:29px;height:25px;cursor:hand;" /></li> <li style="border-top:1px solid gray; height:1px; line-height:1px; margin:5px 0px;padding:0px;"></li> <li><input type="button" title="优秀试题" style="background-image:url('images/icon6.png'); border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li> <li><input type="button" title="典型试题" style="background-image:url('images/icon7.png'); border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li> <li><input type="button" title="异常答卷" style="background-image:url('images/icon8.png'); border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li> <li><input type="button" title="答错位置" style="background-image:url('images/icon10.png'); border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li> <li><input type="button" title="参考答卷" style="background-image:url('images/icon9.png'); border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li> <li style="border-top:1px solid gray; height:1px; line-height:1px; margin:5px 0px;padding:0px;"></li> <li><input type="button" title="默认大小" style="background-image:url('images/icon15.png'); border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li> <li><input type="button" title="放大" style="background-image:url('images/icon13.png'); border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li> <li><input type="button" title="缩小" style="background-image:url('images/icon14.png'); border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li> <li><input type="button" title="前景色设置" style="background-image:url('images/icon22.png'); border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li> <li><input type="button" title="背景色设置" style="background-image:url('images/icon21.png'); border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li> <li style="display:none;"><input type="button" title="右旋转" style="background-image:url('images/icon23.png'); border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li> <li style="display:none;"><input type="button" title="左旋转" style="background-image:url('images/icon24.png'); border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li> <li><input type="button" title="等高" style="background-image:url('images/icon25.png'); border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li> <li><input type="button" title="等宽" style="background-image:url('images/icon26.png'); border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li> </ul> </div> <div id="middle" style="position:absolute;left:36px;top:40px;bottom:25px;right:201px;overflow:scroll;"> <img alt="question" id="testImage" src="" /> </div> <div id="right" style="position:absolute;top:40px;bottom:25px;right:0px;width:200px;border-left:1px solid gray;overflow:hidden;"> <div>right</div> </div> <div id="footer" style="position:absolute;bottom:0px;height:25px;width:100%;background-color:#356BA4;"> <div style="height:25px; line-height:25px; width:100%;color:White;vertical-align:middle;"> <span id="lbl_UserName">用户：测试01[160001]</span> <span id="lbl_Number"> 评卷量：119</span> <span id="lbl_ExamNum">考号：********</span> <span id="lbl_Student">学生：********</span> <span id="lbl_SecretNum"> 密号：676966996560</span> </div> </div> </div> </form> </body> </html>
桂棹兮兰桨，击空明兮溯流光。
