div高度自适应

作者: Robin 分类: Asp.net 发布时间: 2010-09-10 17:18

Firefox的div高度自适应
IE不管设置div的高度与否,都会根据内容来自适应高度。但是FIrefox就没有这么聪明了。

1.如果div想要一个最小高度,那么应该用css的minheight这个属性,但是IE不支持,考虑到大多数用户都使用IE,所以一般情况下这个属性基本上弃置不用。在IE里面,height基本上就可以当作minheight来用,因为如果内容超出height,IE会自适应其高度。但是一旦设置了 height以后,FIrefox就不会自适应div的高度了。所以只能两个属性都不用,干干净净地写<div>Jimbor Studio</div>。

2.即使不设置固定高度,Firefox对高度的自适应也不那么尽人意。如果需要在一个层内嵌套一个需要float来规定的层,那它就又失灵了。其实有个最简单的方法,就是在div内的最下面加一个clear:both的div。例如:

<div>
  <div style=”float:left;”>Jmedia Design</div>
  <div style=”float:right;”>www.jmedia.cn</div>
  <div style=”clear:both;”></div>
</div>

3.还有看到一个js解决的,也可以。
<script type=”text/javascript”>
<!–
  document.getElementById(“box”).style.height=document.getElementById(“right”).scrollHeight+20+”px”
–>
</script>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签云