height百分比%-px的实现(display:table-row)~

在css里的盒模型里，宽和高是不包括边框和内边距的，而且边框和内边距的百分比是基于父框的宽的，所以想用一些自适应布局来实现%-px，如 
<!doctyp html>
<head></head>
<body>
<div>自适应充满</div>
<div>固定高度</div>
</body>
</html>
就比较困难，用javascript是比较方便的，这里使用了display:table-row的方法（应该算原创吧～），对于两行表格，表格width:100%,height:61.8%，第二行固定高度，第一行会自适应充满整个表格。利用此特性就可以实现css height:%-px了～如下面例子（注：可以改变浏览器大小观看效果）：
自适应充满（改变浏览器窗口大小可查看效果）
固定高度
 但是对于正常的表格应该是: 



~~


@@
而使用了display:table-row后，会发现缺少了tbody和td标签，这里浏览器会自动创建tbody标签，这里推荐一篇好文，支付宝UED的：
http://ued.alipay.com/wd/2008/10/29/%E5%9F%BA%E4%BA%8Edisplaytable%E7%9A%84css%E5%B8%83%E5%B1%80/
有时候我们不需要固定高度这个多余标签，于是可以使用:after伪元素来实现现代浏览器比较完美的height:%-px;如（注：可改变浏览器大小观看效果）：
自适应充满（改变浏览器窗口大小可查看效果）
 这里有个小问题，就是，这个自适应的div(display:table-row)的高度是自动生成的，但是和所有盒子一样对于撑开的内部内容正常情况下是无法约束的，只能overflow隐藏（这里排除子内容基于父框百分比的宽和高的情况），比如div里有个img标签或者用img标签地换div标签，如： 测试用图 会发现这里出现了两个问题，一是在chrome下:after的内容不能置于img标签之后，估计和浏览器的渲染顺序有关，img是重绘而来的，暂时还没解决办法，有谁知道解决办法的话，告诉我一声阿。所以上面的例子firefox观看可以避开这个问题。 另外一个是img不能像div(display:table-row)一样自适应。解决办法这里将Img作为背景图，而后使用了background-size属性，如下（注：可以改变浏览器大小观看效果）：
～
 这里的div里的“～”应该使得chrome浏览器自动隐性生成了标签，去掉后会无法显示背景图。 当然background-size的属性是现代浏览器才支持的，各个浏览器支持情况可以参考：
http://www.zhangxinxu.com/css3/css3-background-size.php
ie的解决方案，毫无例外用其私有属性：expression嵌入javascript来计算高度。 这里推荐一篇background-size的好文：
http://demo.doyoe.com/css3/background-size/
和关于background新属性的好文：
http://jayuh.com/tag/css3
posted @ 2010-12-27 01:32  Defims  阅读(475)  评论(0)  编辑  收藏  举报