DIV自动高度问题的完美解决方案

时间:2005/10/7 18:24:44      阅读:4580          

在网上看了不少关于DIV在一些浏览器如firefox自动高度的帖子,最近也是为这点问题搞得头痛,很多人提出了不同的解决方案,看以下代码:

<body>
<div style="width:200px;height:100%;border:1px #000 solid;" id="p">
<div style="width:150px;height:50px; border:1px red solid;"></div>
<div style="width:150px;border:1px blue solid;" id='test'></div>
</div>
<script>...
document.all.test.style.height
=document.all.p.offsetHeight-50;
</script>
</body>

这个固然可以解决问题,但还是觉得不太好(做事太讲究了,呵呵),还有其它CSS的表达方式,不过代码太多了,认为不好,还有一个简单的如下:
在层的最下方产生一个高度为1的空格,上面的这句代码也是从网上来的,反正本人试过,行不通。 
<div id="parent">
<div id="content"> </div>
</div>
当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案
<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div><!--here-->
</div>
在层的最下方产生一个高度为1的空格,可解除这个问题

           今天有时间研究了一下,其实就两句代码就可以实现,简单,把DIV的高试设置为auto,如下:
          
           height:auto;
              overflow: auto; /*注意了,不同就在这里,多了一句*/
          
           就以上两句就OK咯,简单吧,我们再看一下overflow的属性就知道了:
          
           overflow(溢出控制):visible(默认,可见)、auto(自动)、scroll(显示滚动条);
          
           小结:每次遇问题时必须自己先查点资料找答案,解决问题后做一下记录加深印象,下次遇到同类问题就好办多了,有必要时做一下解决问题时过程、方法的笔记。(查找资料的最好方法就是在网上搜索,google.com和baidu.com就是最好的资料库)
          
评论
  • Re:DIV自动高度问题的完美解决方案  (2006/8/6 10:32:32) by 飘萍 
    帖子中的html代码有错误,不知是粘贴的时候乱了还是高亮处理过程中把代码处理错了?
  • Re:DIV自动高度问题的完美解决方案  (2006/8/16 8:52:26) by 飘萍 
        还挺快,帖子弄好了,现在代码和内容能分开,看着比较舒服。
  • Re:DIV自动高度问题的完美解决方案  (2008/11/25 3:26:04) by zhan 
    支持
  • Re:DIV自动高度问题的完美解决方案  (2009/3/21 11:33:17) by ylp1588 
    不知道兼容性如何?
  • Re:DIV自动高度问题的完美解决方案  (2010/6/19 14:39:39) by 闂備胶绮划宀勵敄婢跺瞼涓?Url= 

    还是resize一下来得快.

标 题:
 
姓 名:
 
主 页:

验证码:

评论:
 

Because of the cache,you may see your comments several minutes later.