如题 ?怎么保证,用js和css都可以

解决方案 »

  1.   

    http://aliceui.com/equal-height-layout/
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>三栏等高(wwww.hemin.cn)</title>
    <style type="text/css">
    *{ margin:0; padding:0; font-size:18px; font-family:"新宋体";}
    body {min-width: 850px;height:100%;width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" ); }
    .Top{background:#999; height:100px;}
    .Middle,.Left,.Right{ float:left;padding-bottom: 32767px;margin-bottom:-32767px;}
    .Content{ overflow:hidden;padding:0 250px 0 300px; zoom:1;position:relative; height:100%;}
    .Middle{background:#090;width:100%;}
    .Left{background:#333;width:300px;margin-left:-100%; position:relative; right:300px;_left:250px;}
    .Right{background:#666;width:250px;margin-right:-100%;}
    </style>
    </head>
    <body>
    <div class="Top">顶部</div>
    <div class="Content">
    <div class="Middle">中间</div>
    <div class="Left">左边</div>
    <div class="Right">右边<br /><br /><br /></div>
    </div>
    </body>
    </html>
      

  3.   

    //获取右侧文章区域高度(前提是设置右侧高度自动)
    var height=document.getElementById("product_content").offsetHeight;
    var height1=document.getElementById("about_left").offsetHeight;
    //当右侧高度低于左侧高度时,设置右侧高度等于左侧高度。
    if (height<height1){
    document.getElementById("product_centent").style.height=document.getElementById("about_left").offsetHeight-60+"px";
    }//动态设置左右两侧的背景高度,很适用的效果。
    document.getElementById("main_right").style.height=document.getElementById("about_right").offsetHeight+50+"px";
    document.getElementById("main_left").style.height=document.getElementById("about_right").offsetHeight+50+"px";以前到网上看见的。你试试吧
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>同一容器里两个div一样高</title>
    <style>
    <!--
    *{
        margin:0;
        padding:0;
    }
    body{
        font-family:Arial,helvetica,sans-serif,"宋体";
        font-size:12px;
        margin:0 auto;
        text-align:center;
    }
    #container{
        margin:0px auto;
        width:900px;
        overflow: hidden;zoom:1
    }
    #sidebar{
        width:200px;
        float:left;
        background:#CCCC99;
    }
    #right{
       
        float:right;
        width:700px;
        background:#99CCFF;
       
    }
    #right .content{
       
        width:700px;
        background:#99CCFF;
       
    }
    #right .message{
        background:#123456;
        margin-top:10px;
        background-color:#FF6600;
         
    }
    -->
    </style>
    <script type="text/javascript">
    function SameH(sidebar,right)
    {
        var a=document.getElementByIdx(sidebar);
        var b=document.getElementByIdx(right);
       
        if (a.scrollHeight < b.scrollHeight)
        {
            a.style.height= b.scrollHeight+"px";
        }
        else
        {
            b.style.height= a.scrollHeight+"px";
        }
    }
    </script>
    </head>
    <body>
    <div id="container">
        <div id="sidebar">
        sidebar
        </div>
        <div id="right">
            <div class="content">内容<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />“估计东软的医疗板块业务收入今后3年累积增长率将达到30%。”国内IT服务提供商东软集团股份有限公司(600718.SH,下称“东软”)首席运营官兼高级副总裁卢朝霞昨日对CBN记者表示,由于国家政府部门明确规定,此次医改方案实施将优先采用国内产品,这对国内医疗设备厂家和国内IT厂家来说,是一个非常大的利好消息。
            </div>
            <div class="message">留言板</div>
    </div>
    </div>
    <script type="text/javascript">SameH("sidebar","right");</script>
    </body>
    </html>