一般情况下可以设想外框 固定，2个内框的高度高于外框，超出隐藏，这样就可以了，但这个有个缺点，当内容超过设定值的时候缺东西了，所以这个方案无法执行。所以最终考虑还是只能使用JS来解决这个问题，将left和right获取main的高，让两边平行。
<!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 type="text/css"> /* css Reset */ html,body,div,span,p,h1,h2,h3,h4,h5,h6,img,ol,ul,li,form,input,dl,dt,dd,table,tr,td,em,strong{ margin:0; padding:0; } ul,ol{ list-style:none outside none; } img{ border:none; } h1,h2,h3,h4,h5,h6{ font-size:100%; } .clear{clear:both} /* Reset End */ .box1{width:827px;} .left{border:1px solid orange;width:200px;float:left;} .main{border:1px solid blue;width:400px;float:left;margin-left:10px;} .right{border:1px solid green;float:right;margin-left:10px;width:200px;} </style> </head> <body> <div class="box1"> <div id="left" class="left">左边内容</div> <div id="main" class="main">主要内容<br> 主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br>主要内容<br></div> <div id="right" class="right">右边内容</div> </div> <script type="text/javascript"> (function(){ var $ = function(e){return document.getElementById(e);} var h = $('main').offsetHeight; $('left').style.height = h+'px'; $('right').style.height = h+'px'; })(); </script> </body> </html>
这个方法还是有缺陷，如果我2侧的内容高了怎么办？我不可能只为了获取一个高度来解决突发事件，所以改了下代码
<div id="mm"> <div id="mm1"></div> <div id="mm2"></div> </div>
<script type="text/javascript"> <!-- window.onload=window.onresize=function(){ if(document.getElementById("mm2").clientHeight<document.getElementById("mm1").clientHeight){ document.getElementById("mm2").style.height=document.getElementById("mm1").offsetHeight+"px"; } else{ document.getElementById("mm1").style.height=document.getElementById("mm2").offsetHeight+"px"; } } --> </script>
希望大家能用上。
武汉网站建设领导品牌！武汉网站建设首选珞珈学子网络科技，精英技术团队，技术咨询电话：027-68772750 13618602336
上一篇：提升电子商务网站易用性的10个注意事项
下一篇：原生js回到顶部代码
