通常情况下,没有定高度的两个DIV容器都是根据内容来撑起高度的,要想高度统一,就得定个相同的高度(height)或内容高度一样。如果不想定固定高度,内容又不确定,可以通过下面这段JS来实现:
<!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>5JUN.COM</title> <style type="text/css"> body{margin:0px;padding:0px;color:black;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height: 140%;} div{margin:0px;padding:0px;border:0px;} #main{width:780px;margin:0 auto;overflow:hidden;background:#CCC;} #left{width:400px;float:left;background:#FF9966;border:1px solid #f00;} #right{width:350px;float:right;background:#6699CC;border:1px solid #f00;} </style> </head> <body> <div id="main"> <div id="left">left<br />用力撑开左边DIV<br />用力撑开左边DIV<br />用力撑开左边DIV<br />用力撑开左边DIV<br />用力撑开左边DIV<br /></div> <div id="right">right<br />右边DIV的高度也被撑高了吧~</div> </div> <script type="text/javascript"> document.getElementById("right").style.height=document.getElementById("main").scrollHeight+"px"; document.getElementById("left").style.height=document.getElementById("main").scrollHeight-2+"px"; </script> </body> </html>
提示:你可以先修改部分代码再运行。
呢称 (*必填)
邮箱 (不会公开) (*必填)
网址