css布局自适应高度解决方法

CSS 布局自适应高度解决方法 CSS 布局自适应高度解决方法确实让人很头疼，先看例子： 这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度） 的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加 JS 脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边 界和正的内补丁相结合的方法来解决列高度相同的问题。 先看代码： #wrap overflow: hidden; #sideleft, #sideright padding-bottom: 32767px; margin-bottom: -32767px; 实现原理： 块元素必须包含在一个容器里。 应用 overflow: hidden 到容器里的元素。 应用 padding-bottom（足够大的值）到列的块元素 。 应用 margin-bottom（足够大的值）到列的块元素。 padding-bottom 将列拉长变的一样高，而负的 margin-bottom 又使其回到底部开 始的位置，同时，溢出部分隐藏掉了。 兼容各浏览器 IE Mac 5 得到高度正确，所以要过滤掉上面的代码。 /*/ #sideleft, #sideright padding-bottom: 32767px; margin-bottom: -32767px; /*/ Opera 1. Opera7.0-7.2 不能正确清除溢出部分，所以要加： /* easy clearing */ #wrap:after content: DO NOT LEAVE IT IS NOT REAL; display: block; height: 0; clear: both; visibility: hidden; #wrap display: inline-block; /*/ #wrap display: block; /* end easy clearing */ /*/ 2. Opera8 处理 overflow: hidden 有个 BUG,还得加上以下代码： /*/ #sideleft, #sideright padding-bottom: 32767px !important; margin-bottom: -32767px !important; media all and (min-width: 0px) #sideleft, #sideright padding-bottom: 0 !important; margin-bottom: 0 !important; #sideleft:before, #sideright:before content: DO NOT LEAVE IT IS NOT REAL; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; /*/ 3.Opera9 的 B2 在修正 8 的 bug. 测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2 通过。 最终效果: 代码： Equal height(DIV+CSS 布局中自适应高度的解决方法) body padding: 0; margin: 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 140%; text-align: center; background:#E7DFD3; #wrap width: 750px; margin: 0 auto; overflow: hidden; #header background: #E8E8E8; #sideleft width: 580px; float: left; background: #FFF; text-align: left; #sideright width: 170px; float: left; background: #F0F0F0; text-align: left; /* easy clearing */ #wrap:after content: DO NOT LEAVE IT IS NOT REAL; display: block; height: 0; clear: both; visibility: hidden; #wrap display: inline-block; /*/ #wrap display: block; /* end easy clearing */ /*/ #sideleft, #sideright padding-bottom: 32767px !important; margin-bottom: -32767px !important; media all and (min-width: 0px) #sideleft, #sideright padding-bottom: 0 !important; margin-bottom: 0 !important; #sideleft:before, #sideright:before content: DO NOT LEAVE IT IS NOT REAL; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; /*/ #footer background: #E8E8E8; width: 100%; float: left; h1,h2,address,p margin: 0; padding: .8em; h1,h2font-size: 20px; Head sideleft 北京羿腾久久网络科技有限公司是互联网行业逐步成长起来的一颗新星，以给用户 提供更加真实的网络 3D 虚拟环境为主要发展方向，致力于 web3D 技术的研究和应用开发。 羿腾公司的雏形是河南大学大学生校园工作室，于 2009 年始在河南大学计算机科 学与信息工程系成立，作为一群有共同爱好的青年，聚到一起，在老师的指导下，开始了 图像处理方面的技术实践，在校期间，先后完成了卫星大图片压缩显示和 3D 数字地球的模 拟建设实践；应用软件方面，有一系列拥有自主知识产权的自动、半自动消费办公系统投 入市场使用；网络建设方面，先后完成了河南大学实训平台、开封市绿森林家具公司、北 京市坤盛腾达建筑工程有限公司、北京格林摩尔数字农业国际生态园区的宣传性网站建设 等 30 多个中大型宣传性网站项目。 作为年轻一代的创业者，站在时代的新高度，羿腾公司致力于 web3D 技术的研究应 用，目标是做中国最具影响力的 web3D 应用技术提供商，努力把最好的用户体验展现给用 户，搭起企业与客户之间更真实的沟通环境。 在当下竞争激烈的互联网行业，为适应当前发展，羿腾公司在兼顾核心技术研发的 同时，专门投入资金和人力资源将目前市场混乱的网站建设和网站 SEO 优化、网络推广策 略等一系列相关技术融为一体的创新性举措，为企业或者个人在各种应用方面的需求宣传 提供了强有力的技术支持。 “不求最好的，只做更好的！”是我们羿腾公司不懈的追求目标，我们在前进的道 路上会把最好的服务提供给您，在 3D 科技带给您全新体验的同时，我们会更加的努力，希 望 3D 互联技术展现在您面前的是一个平坦的世界，让虚拟世界变的更直观，让您获取信息 更方便。 公司主营业务：web3D-虚拟现实，企业宣传性网站建设，SEO 优化，网络推广，计 算机应用软件开发。 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就 相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。 任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 sideright 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是 如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上 的牺牲。 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一