1px"不差—应用程序布局，适合CRM、ER

来源：互联网发布：为什么程序员都黑php 编辑：程序博客网时间：2024/05/09 11:18

适合CRM、ERP可以用到的框架布局，高度宽度都做到了自适应。右侧的iframe也是高度自适应。调整了不同浏览器那几个px的差异,多种浏览器表现一模一样。只是使用的标准的简单的CSS代码，代码简单但是还是比较细致的。基本没有用到CSS hack。初学者，高手都只得一看。

我知道，一般程序员，都比较烦这个，不屑于做这个东西。如果觉得有用拿去用吧，如果觉得没用。仍几块砖给我。
<!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"><head> <title>无标题页</title> <style> body, html { margin: 0; height: 100%; background-color: Aqua; overflow: hidden; } #top { height: 80px; width: auto; } #middle { border-style: solid; border-width: 1px 0px; border-color: #000000; width: 100%; height: auto; top: 80px; bottom: 20px; position: absolute; background-color: DarkGray; } #bottom { height: 20px; width: auto; bottom: 0; position: absolute; } #left { float: left; width: 200px; border-right: solid 1px White; overflow: auto; height: 100%; /* 兼容代码 */ top: 0px; bottom: 0px; position: absolute; left: 0px; /* 兼容代码 */ } #right { background-color: #efefef; overflow: auto; height: 100%; /* 兼容代码 */ left: 201px; top: 0px; bottom: 0px; position: absolute; right: 0px; /* 兼容代码 */ } #main { top: 0px; bottom: 0px; position: absolute; width: 100%; height: 100%; } </style></head><body> <form id="form1"> <div id="divAll"> <div id="top"> <h3>Logo</h3> </div> <div id="middle"> <div id="left"> left<br /> left<br /> left<br /> left<br /> left<br />导航 left<br />导航 left<br />导航导航 left<br />导航 left<br />导航导航 left<br /> left<br /> left<br /> left<br /> left<br /> left<br /> left<br /> left<br /> left<br /> left<br /> left<br /> </div> <div id="right"> <iframe src="http://www.cnblogs.com" frameborder="0" marginheight="0" id="main" name="main"></iframe> </div> </div> <div id="bottom"> 版权信息 </div> </div> </form></body>

http://www.cnblogs.com/lauyee/archive/2010/08/06/1794474.html

补：看到很多朋友提出疑问，说即用了绝对定位，有用了浮动。那是经过调了几次发现只有这样才能显示正常。如果你使用IE8浏览器，则注释和注释之间的部分都是可以省去的。对于CSS我其实也是门外汉，以上代码都是经过尝试做出的。能用就是王道。有些朋友说IE6下iframe会出现问题。这真是一个值得在修改尝试的问题，因为企业里用IE6的也不在少数。所以了解原理在加上实践才是最可行的。

在实际的应用中如果要做到精致，很难不用js再对样式做出调整，总之解决问题才是最重要的王道，其次是代码简洁。而技巧，我们也只能当它是技巧。

补：另一件郁闷的事，博客园的这个“HTML 原始程序代码编辑器”在我把代码贴进去后自动生成了两套样式，不知是什么原因。已改正。