经典论坛's Archiver

瑶子 发表于 2008-8-29 14:56

左右两边随内容自适应的,试过无效

http://www.otoncafe.com/tt/inside_list1.htm想问下我这个文件左边的"办事指南的内容一多的话,版权的内容就不会自己下来的.我试过好多方法都无法生效,请指教.谢谢
大家看下我用的方法,是左右两边随内容自适应的.
方法一:在那个层里面加<div style="clear:both;"></div>
方法二:加JS<script language="javascript">
document.getElementById("左DIV").style.height=document.getElementById("右DIV").scrollHeight+"px"
document.getElementById("右DIV").style.height=document.getElementById("左DIV").scrollHeight+"px"
</script>
方法三:加这JS:[html]<script type="text/javascript">
<!--
function columnHeight(){
        var i,oh,hh,h=0,dA=document.w3cooleqc,an=document.w3cooleqa;
        if(dA&&dA.length){
                an=1;
                for(i=0;i<dA.length;i++){
                        dA[i].style.height='auto';
                        }
                for(i=0;i<dA.length;i++){
                        oh=dA[i].offsetHeight;
                        h=(oh>h)?oh:h;
                }
                for(i=0;i<dA.length;i++){
                        if(an){
                                dA[i].style.height=h+'px';
                        }else{
                                equalActive(dA[i].id,dA[i].offsetHeight,h);
                        }
                }
                if(an){
                        for(i=0;i<dA.length;i++){
                                hh=dA[i].offsetHeight;
                        if(hh>h){
                                dA[i].style.height=(h-(hh-h))+'px';
                                }
                        }
                }else{
                        document.w3cooleqa=1;
                }
                        document.w3cooleqth=document.body.offsetHeight;
                        document.w3cooleqtw=document.body.offsetWidth;
                }
       }
       function blanceHeight(){
        if(document.w3cooleqth!=document.body.offsetHeight||document.w3cooleqtw!=document.body.offsetWidth){
                columnHeight();
        }
       }
       function equalColumns(){
        if(document.getElementById){
                document.w3cooleqc=new Array;
                for(i=0;i<arguments.length;i++){
                        document.w3cooleqc[i]=document.getElementById(arguments[i]);
                }
                setInterval("blanceHeight()",10);
        }
       }
       function equalActive(el,h,ht){
        var sp=1000,inc=1000,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
        ch=(ch)?ch:h;
        var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px';
        oh=g.offsetHeight;
        if(oh>ht){
                nh=(ht-(oh-ht));g.style.height=nh+'px';
        }
        if(nh<adT){setTimeout("equalActive('"+el+"',"+nh+","+ht+")",sp);}
       }
window.onload = function(){
     equalColumns('CL','CR');
}
-->
</script>[/html]

瑶子 发表于 2008-8-31 13:36

继续请教中....

debiangrub 发表于 2008-8-31 15:55

这不是典型的两列等高问题吗?
看这个。
[url]http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm[/url]

[[i] 本帖最后由 debiangrub 于 2008-8-31 15:57 编辑 [/i]]

debiangrub 发表于 2008-8-31 16:05

要让他们等高就要让他们有交叉的地方。。。。互相拉扯。。。你长我也长。。。

就像两个圆环一样。扯动其中一个。别一个会跟着被扯动一样。

想像一下你以前用table布局的时候。是不是还记得像这样的结构。你不论在左边打回车还是在右边内容区打回车他都能视觉上一起拉高。。。。你两个那样平行的放着，没有进行过交叉怎么有等高呢？

[html]<!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>无标题文档</title>
</head>

<body>
<table width="200" border="1">
  <tr>
    <td><p>我是</p>
    </td>
    <td valign="top"><table width="200" border="1">
你是视觉上能和左边那个一起长高的
      <tr>
        <td><p>我是右边实际填内容的地方</p>
          </td>
      </tr>
    </table></td>
  </tr>
</table>

</body>
</html>
[/html]

Gzink 发表于 2008-8-31 16:18

楼主研究一下这个，我成功过，典型的三行二列居中高度自适应布局
[url]http://www.w3cn.org/article/layout/2004/88.html[/url]

瑶子 发表于 2008-9-1 10:12

谢谢各位建议.

瑶子 发表于 2008-9-1 10:37

照着上面的方法去操作.仍无法弄出,郁闷,总是内容一延伸,下面的版权无法下去.不可能每个LEFT 和RIGHT都定S高度呀.

marsvip 发表于 2008-9-1 10:49

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
body{ margin:0; padding:0;font:12px/200% Arial; background:#eee;}

#main{width:890px; margin:20px auto 0 auto; overflow:hidden;}

#midpart {float:left; width:440px; background:#FE0000;}

#rightpart{float:right; width:430px; background:#FFA401;}

#midpart,#leftpart,#rightpart{ height:auto; padding-bottom: 9999px; margin-bottom: -9999px; }


</style>
</head>
<body>
<div id="main">
        <div id="midpart">
            midpart<br/> midpart<br/> midpart<br/> midpart<br/>
        </div>
       
        <div id="rightpart">
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
                rightpart<br/>
        </div>
</div>
</body>
</html>[/code]

chiyuderen 发表于 2008-9-1 11:50

看代码
[html]
<!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>无标题文档</title>
<style>
#interfixleft,#mainright{ height:auto; overflow:hidden; float:left; margin-left:10px;}
#interfixleft{ width:300px; height:200px; border:1px solid #ccc}
#mainright{ width:200px; border:1px solid #333399}
</style>

</head>

<body>
<div id="interfixleft">
left
<br />
<br />
<br />
<br />
<br />
</div>
<div id="mainright">right</div>
<script language="javascript">
function heightauto()
{
        if(document.getElementById("interfixleft"))
        {
                 var aleft=document.getElementById("interfixleft").clientHeight;
                 var bright=document.getElementById("mainright").clientHeight;
                if (aleft>bright)
                {
                        document.getElementById("mainright").style.height=aleft+"px";
                }
                else
                {
                        document.getElementById("interfixleft").style.height=bright+"px";
                }
        }
}
heightauto();
</script>
</body>
</html>

[/html]

瑶子 发表于 2008-9-1 15:32

[url]http://www.otoncafe.com/tt/inside_list1.htm[/url]
我那个版权压住左边的内容怎么不会下去的,都是重叠在一起.
调了几天了,根据上面几位大侠的方法,还是调不好.请大侠就我那个例子,指点下错误.

chiyuderen 发表于 2008-9-2 10:23

你给版权上面的BOX加个高度试试··

瑶子 发表于 2008-9-2 12:45

谢谢各位,已弄好.清了左边的高度.

yhz7155 发表于 2008-9-3 15:49

[url]http://bbs.blueidea.com/thread-2877357-1-1.html[/url]

页: [1]



Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.