如何能让这个带背景的层也在最下面,是不是高手无所谓,重在参与,给点建议.

先看图,左面带有几个LOGO的层是"left",右面的这个是"mainContent"
因为不可能保证右面的内容总是足以使,"mainContent"和"left"的高度一样,所以用了JS,当"mainContent"内容不足时,使之高度相同.window.onload=window.onresize=function(){
if(document.getElementById("mainContent").clientHeight<document.getElementById("left").clientHeight){
document.getElementById("mainContent").style.height=document.getElementById("left").offsetHeight+"px";}
else{document.getElementById("mainContent").style.height>document.getElementById("left").offsetHeight+"px";}}可是问题就像图中显示的一样,右面的"mainContent"里有一个小层(带一个个小球的背景)如何能让这个层也同"mainContent"一起动,也就是底部无间距呢.
请指教.多谢多谢

解决方案 »

  1.   

    另外,一个家伙对我说这代码太啰嗦,为什么,有什么简单的方法吗??
    window.onload=window.onresize=function(){
    if(document.getElementById("mainContent").clientHeight<document.getElementById("left").clientHeight){
    document.getElementById("mainContent").style.height=document.getElementById("left").offsetHeight+"px";}
    else{document.getElementById("mainContent").style.height>document.getElementById("left").offsetHeight+"px";}}
      

  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=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #container{
    width:800px; overflow:hidden; display:block;
    }
    #left{
    width:300px; float:left; border:1px solid #DDD; background:#F8F8F8;
    }
    #mainContent{
    position:relative; width:490px; float:right; border:1px solid #006699; background:#F5F6FB;
    }
    #bottom{
    position:absolute; bottom:0px;
    }
    </style>
    <script type="text/javascript">
    window.onload = function(){
    var $ = document.getElementById;
    $("left").style.height = $("mainContent").style.height = Math.max($("left").offsetHeight, $("mainContent").offsetHeight) + "px";
    };
    </script>
    </head><body>
    <div id="container">
    <div id="left">
         左边内容<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
        <div id="mainContent">
         内容
            <div id="bottom">我在底部</div>
        </div>
    </div></body>
    </html>
      

  3.   

    多谢楼上的回答,不过不行,首先页面是以百分比布局,一做POSITION MAINCONTENT部分全乱了,还有,BOTTOM那个层消失了.不过.谢谢你的JS.学习了
      

  4.   

    window.onload = function(){
        var $ = document.getElementById;
        $("left").style.height = $("mainContent").style.height = Math.max($("left").offsetHeight, $("mainContent").offsetHeight) + "px";
    };这个刚刚试了,也不行,在FF不起作用.
      

  5.   

    看来还是不能偷懒..
    <!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=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #container{
        width:800px; overflow:hidden; display:block;
    }
    #left{
        width:300px; float:left; border:1px solid #DDD; background:#F8F8F8;
    }
    #mainContent{
        position:relative; width:490px; float:right; border:1px solid #006699; background:#F5F6FB;
    }
    #bottom{
        position:absolute; bottom:0px;
    }
    </style>
    <script type="text/javascript">
    function $(id){
    return document.getElementById(id);
    }
    window.onload = function(){
        $("left").style.height = $("mainContent").style.height = Math.max($("left").offsetHeight, $("mainContent").offsetHeight) + "px";
    };
    </script>
    </head><body>
    <div id="container">
        <div id="left">
            左边内容<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
        <div id="mainContent">
            <div>内容</div>
            <div id="bottom">我在底部</div>
        </div>
    </div></body>
    </html>
      

  6.   

    没办法,我自己解决了,但是,是不想用的方法,把图片做为MAINCONTENT的背景,虽然心不甘,但没有办法,但有一个问题,就是我设成背景后,要做一个PADDING-BOTTOM:45PX,这样一来,就使本来,已经与LEFT在同一水平上的MAINCONTENT又降了45PX,如何在这里减去这45PX呢,答完结账.多谢Free_Wind22 的支持,谢谢
    function $(id){
        return document.getElementById(id);
    }
    window.onload = function(){
        $("left").style.height = $("mainContent").style.height = Math.max($("left").offsetHeight, $("mainContent").offsetHeight) + "px";
    };