很多的Web designer在刚接触W3C标准的时候,都遇到过高度自适应的问题。因为div等对象的height:100%;并不能够直接产生实际效果,于是开始怀疑浏览器是否支持height:100%;的编写方法?当然不是,最明显的例子就是table height="100"是没有任何问题的。这是很令人烦恼的问题。我浏览了很多网站,包括www.w3cn.org等,有的解决办法是不断地修改height的固定值,或者利用页面背景和div背景相同来欺骗浏览者的视觉,但都没有从根本上解决问题。今天从一本《CSS网站布局实录》上终于找到最完美的解决办法,来看一下这段高度自适应的CSS代码:
分析: 以下转载自http://hi.baidu.com/samxx8/blog/item/eeb4c0efc112963facafd55b.html 一、高度的自适应(父div高度随子div的高度改变而改变) 1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。 效果:ie、FF下一致 2、如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变化而变化,ff中则固定大小,如父div设置height:50px 代码: ie效果 FF下效果 3、如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both 未加空div代码: IE效果: FF效果:
二、高度的自适应(子div高度随父亲div高度改变而改变) 黑框的上方是对齐的,但是设置了同样的高度,效果却不一样,代码如下: <style type="text/css"> #aa{ border:#000000 solid 5px;height:100px;} #bb{border:#00ffff solid 5px;float:left; height:100%} #cc{ border:#0033CC solid 5px;float:left} </style> <div id="aa"> <div id="bb">子div</div> <div id="cc">子div</div> </div> 如果没有设置边框,完全没有高度不一致的情况,子div适应父div很简单,如上面代码,只是在子div加了height:100%属性即可。 iframe自适应高度 通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条。 这篇文章,希望在这两个方面再做一些深入。 可能有人还没接触到这个问题过,先说明一下,什么是高度自适应吧。所谓iframe高度自适应,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了。 顺便说下,iframe在迫不得已的时候才去用,它会给前端开发带来太多的麻烦。 传统做法大致有两个: 两个方法都只处理了静的东西,就是只在内容加载的时候执行,如果JS去操作DOM引起的高度变化,都不太方便。 如果在主窗口做一个Interval,不停的来获取被包含页的高度,然后做同步,是不是即方便,又解决了JS操作DOM的问题了呢?答案是肯定的。 Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html 主页面代码示例: <iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe><script type="text/javascript">function reinitIframe(){var iframe = document.getElementById("frame_content");try{iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;}catch (ex){}}window.setInterval("reinitIframe()", 200);</script>
一直执行,效率会不会有问题? 下面谈谈各浏览器的兼容性问题,如何获取到正确的高度,主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype,不同的doctype应该不会影响结果,但是假如你的页面没有申明doctype,那还是先去加一个吧。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
在主页面追加以下测试代码,以输出这两个值,代码示例: <div><button οnclick="checkHeight()">Check Height</button></div><script type="text/javascript">function checkHeight() {var iframe = document.getElementById("frame_content");var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;alert("bHeight:" + bHeight + ", dHeight:" + dHeight);}</script>
被加载页面,可以切换一个绝对定位的层,来使页面高度动态改变。如果层展开,则会撑高页面高度。代码示例: <div><button οnclick="toggleOverlay()">Toggle Overlay</button></div><div style="height:160px;position:relative"><div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div></div><script type="text/javascript">function toggleOverlay() {var overlay = document.getElementById('overlay');overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';}</script>
下面列出以上代码在各浏览器的测试值:
暂且无视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
id="frame_content" src="iframe_b.html" scrolling="no"
frameborder="0" οnlοad="this.height=100">
</iframe>
<script type="text/javascript">
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);
</script>
|
div高度自适应问题杂谈
最新推荐文章于 2022-05-06 17:36:58 发布