我就是一道弧Stjacob's Blog|WAG

• 平行div保持相同高度 (自适应) - [一些资源]

  2008/06/17

  对自己的三栏css进行修改。发现中右两栏的高度无法与左边的日志栏自动适应。日志栏由于日志的数量会变动。但如果日志栏高度低的话，又无法与中右栏高度一致。上网找了下，有一种利用overflow属性把多个div（这些div都设置了超长的高度或者宽度）进行平整，效果不太好。似乎纯粹css无法做到div高度自适应。

  这里有个方法：

  假设有div1,div2,div3(三个子div，不管哪个栏变动)。在加载页面里三个子div声明结束后（要在父div的结构里），加上：

  <script type="text/javascript">

  var a=Math.max(document.getElementById("div1").offsetHeight,document.getElementById

  ("div2").offsetHeight,document.getElementById("div3").offsetHeight);

  document.getElementById("div1").style.height = a + "px";

  document.getElementById("div2").style.height = a + "px";

  document.getElementById("div3").style.height = a + "px";
  </script>  

   

  就是比较三个栏的高度大小，取出最大值。然后全部赋值为最高的。
   
  Tag：div 自适应 相同高度 css javascript

  stjacob 发表于16:35:55 | 阅读全文 | 评论 0 | 编辑 | 推荐 | 分类：一些资源

Feed

Douban