div高度自适应问题杂谈

 

很多的Web designer在刚接触W3C标准的时候，都遇到过高度自适应的问题。因为div等对象的height:100%;并不能够直接产生实际效果，于是开始怀疑浏览器是否支持height:100%;的编写方法？当然不是，最明显的例子就是table height="100"是没有任何问题的。这是很令人烦恼的问题。我浏览了很多网站，包括www.w3cn.org等，有的解决办法是不断地修改height的固定值，或者利用页面背景和div背景相同来欺骗浏览者的视觉，但都没有从根本上解决问题。今天从一本《CSS网站布局实录》上终于找到最完美的解决办法，来看一下这段高度自适应的CSS代码： html,body{      margin:0px;      height:100%; } #left {      background-color:#CCC;      width:300px;      height:100%;      float:left; } 代码已经到了不能再简单的地步，对#left对象设置了height:100%;，然而也能够看见，同时设置了HTML与body的height:100%;，而这个就是高度自适应问题的关键所在。 分析： 一个对象高度是否可以使用百分比显示，取决于对象的父级对象，#left在页面中直接旋转在body之中，因此它的父级是body，而浏览器默认状态下，是没有给body一个高度属性的，因此当我们直接设置#left为height:100%;时，不会产生任何效果，而当我们给body设置了100%之后，它的子级对象#left的height:100%;便发生作用了，这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外，还给HTML对象也应用相同的样式设计，这样做的好处是使IE与firefox浏览器都能够实现高度自适应，而body却不是。另外，Firefox中的HTML标签不是100%高度，因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。 以下转载自http://hi.baidu.com/samxx8/blog/item/eeb4c0efc112963facafd55b.html 一、高度的自适应（父div高度随子div的高度改变而改变） 1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。 代码： 父div      子div      子div 效果：ie、FF下一致          2、如果父div定义height,子div均为标准流的时候，在IE下父div的height随内容变化而变化，ff中则固定大小，如父div设置height:50px 代码： 父div     子div     子div ie效果                     FF下效果   3、如果子div使用了float属性，此时已经脱离标准流，父div不会随内容的高度变化而变化，解决的办法是在浮动的div下面，加一个空div，设置clear属性both 未加空div代码：     #aa{ border:#000000solid5px;}     #bb{ border:#00ffffsolid5px;float:left}     #cc{ border:#0033CCsolid5px;float:left} 父div     子div     子div IE效果：              FF效果：    修改后代码： 父div     子div     子div    修改后效果： IE FF一致 4.另类的高度自适应 原理: padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。此方法必须加文档信息才能正常显示 代码：     子div     子div    子div 效果： 二、高度的自适应（子div高度随父亲div高度改变而改变） 在有边框的情况下，你会发现同一个div,在ie下的高度和在FF下的高度是不一样的，比如你设置了高度为100px的div，边框是 border:5px;IE的高度是5+5+空白区域=100px，而FF下高度是100px的div是不包括高度的，只是空白区域的高度，如下图黑框的 部分: 黑框的上方是对齐的，但是设置了同样的高度，效果却不一样，代码如下：     子div     子div 如果没有设置边框，完全没有高度不一致的情况，子div适应父div很简单，如上面代码，只是在子div加了height:100%属性即可。 有一点要注意，如果父div是body的话，也就是说一个body套了一个div，让div适合body的大小的，必须设置body的高度才能实现子div随body改变而改变，body{height:100%} iframe自适应高度 通过Google搜索iframe 自适应高度，结果5W多条，搜索iframe 高度自适应，结果2W多条。 我翻了前面的几十条，刨去大量的转载，有那么三五篇是原创的。而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑到JS操作DOM之后，如何做动态同步的问题。另外，在兼容性方面，也研究的不彻底。 这篇文章，希望在这两个方面再做一些深入。 可能有人还没接触到这个问题过，先说明一下，什么是高度自适应吧。所谓iframe高度自适应，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。 顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。 传统做法大致有两个： 方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。 方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。 在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。 两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。 如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。 Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html 主页面代码示例： 一直执行，效率会不会有问题？ 我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。 下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但是假如你的页面没有申明doctype，那还是先去加一个吧。 在主页面追加以下测试代码，以输出这两个值，代码示例： Check Height 被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例： Toggle Overlay 下面列出以上代码在各浏览器的测试值： （bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值） / 层隐藏时 层展开时 bHeight dHeight bHeight dHeight IE6 184 184 184 303 IE7 184 184 184 303 FF 184 184 184 303 Opera 181 181 300 300 Safari 184 184 303 184 暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。 但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了： function reinitIframe(){var iframe = document.getElementById("frame_content");try{var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;var height = Math.max(bHeight, dHeight);iframe.height = height;}catch (ex){}}window.setInterval("reinitIframe()", 200); 这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。 如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。 可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 οnlοad=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。 这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。 在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。 这是最终的主页面的代码：