内容正在载入中,请稍后……
公告
About me
搜索
统计
其他
30 Jun.2009

DIV高度自适应解决方法汇总 不指定

作者: 我就是个世界   分类:技术&学习 » DIV+CSS   出处:本站原创            | |
两个DIV高度自适应解决方法汇总:

我们经常会碰到左右两个DIV高度不能自适应的问题,今天在这里整理一下各种解决方法:

网站优化(seo)中,提到过网站样式的优化,即在网站的布局设计中,采用DIV+CSS来布局。网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度(事先并不能确定哪列的高度)的相同,有以下几种方法:

       1、JS实现(判断2个div高);
       2、纯css方法;
       3、加背景图片实现


    div+css基本布局:

<div id="box">
  <div id="left"></div>
  <div id="right"></div>
</div>


    1、js实现div自适应高度

代码如下:

<script type="text/javascript">
  <!--
  window.onload=window.onresize=function(){
  if(document.getElementById("right").clientHeight<document.getElementById("left").clientHeight){
  document.getElementById("right").style.height=document.getElementById("left").offsetHeight+"px";
  }
  else{
  document.getElementById("left").style.height=document.getElementById("right").offsetHeight+"px";
  }
  }
  -->
</script>


    (注:网上公布了不少方法,但代码或多或少有错;上面的是无错代码;上面的代码在IE6.0/IE7.0/FF下通过,并没有在opera下测试。个人认为这个方法比较完善)事实上,这种办法真正意义上实现了两侧等高,并且能让两侧中任一侧去自由去适应另一侧,但是其缺点就在于,只有当DOM加载完成后,才有会这样等高的效果,如果网速够快,这个漏洞可以忽略不计。

效果:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
演示下载:attachment.php?fid=244




    2、纯CSS方法(两种)

           1)、  负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合

    css里代码(IE下测试通过,但不会显示div下边框,即border-bottom):

/*左右自适应相同高度start*/
#left,#right
{
  padding-bottom: 32767px !important;
  margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
  #left,#right
  {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  #left:before, #right:before
  {
    content: '[DO NOT LEAVE IT IS NOT REAL]';
    display: block;
    background: inherit;
    padding-top: 32767px !important;
    margin-bottom: -32767px !important;
    height: 0;
  }
}
/*左右自适应相同高度end*/


           2)、 用absolute设置一个足够高的高度,在父级元素中清除溢出的部分,具体的代码如下:


  <style>
    #container{font-size:14px;width:300px;overflow:hidden;border:3px solid gray;margin:10px auto 0;color:#fff;position:relative;}
    #leftSide{background:#f50;width:100px;float:left;position:absolute;height:200000px;}
    #rightSide{width:190px;float:right;text-align:center;background:purple;}
  </style>
    <div id="container">
        <div id="leftSide">这边的高度自适应右侧的高度</div>
        <div id="rightSide">
                <script type="text/javascript">
                for(i=0;i<10;i++){  
                document.write(i+'<br>');  
                }  
            </script>
        </div>
    </div>

       其实这种方法并没有真正的实现左右两个div等高,只是用了障眼法,利用container的overflow:hidden清除了左侧多余的部分,以达到视觉上左右等高的目的,虽然有“白猫黑猫,逮着老鼠就是好猫”的说法,但是笔者并不着重推荐这种方法,因为给父级元素添加relative,会带来很多不必要的麻烦,况且只能是设置absolute的一侧自适应另一侧的高度,并不能让两侧中任一侧去自由去适应另一侧!

    3、加背景图片

    这个方法,很多大网站在使用,如163,sina等。

    XHTML代码:


<div id="box">
    <div id="left">这是第一列</div>
    <div id="right">这是第二列</div>
    <div class="clear"></div>
</div>


    CSS代码:

#box{ width:776px; background:url(bg.gif) repeat-y 300px;}
#left{ float:left; width:300px;}
#right{ float:right; width:476px;}
.clear{ clear:both;}


分享到QQ空间
最后编辑: 我就是个世界 编辑于April 16, 2011 16:54
时间:17:23 评论(0) 引用(0) 阅读(2900) Tags: , , , ,
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情