He Min Blog» Blog Archive » 五种实现等高方法

<!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>等高边距实现(www.hemin.cn)</title> <style type="text/css"> *{ margin:0; padding:0;} body{ margin:10px;} .top,.midst,.bottom{width:600px;} .left,.right{float:left; padding-bottom: 32767px;margin-bottom:-32767px;} .top{ height:100px; margin-bottom:10px;background:#808000;} .midst{ overflow:hidden;zoom:1;} .left{ width:200px; display:inline; background:#f00;} .right{width:390px; margin-left:10px; display:inline; background:#008000;} .bottom{ margin-top:10px; height:100px; background:#A65300;} </style> </head> <body> <div class="top">头部</div> <div class="midst"> <div class="left">左边<br /><br /><br /><br /><br /><br /><br /></div> <div class="right">右边</div> </div> <div class="bottom">尾部</div> </body> </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=utf-8" /> <title>等高(背景图)实现(www.hemin.cn)</title> <style type="text/css"> *{ margin:0; padding:0;} body{ margin:10px;} .top,.midst,.bottom{width:600px;} .left,.right{float:left;padding-bottom: 32767px;margin-bottom:-32767px;} .top{ height:100px; margin-bottom:10px;background:#808000;} .midst{ overflow:hidden; background:url(http://www.hemin.cn/blog/wp-content/uploads/2009/06/dg_bg.gif) repeat-y right top;} .left{ width:200px; display:inline; background:#f00;} .right{width:390px; margin-left:10px; display:inline; background:#008000;} .bottom{ margin-top:10px; height:100px; background:#A65300;} </style> </head> <body> <div class="top">头部</div> <div class="midst"> <div class="left">左边<br /><br /><br /><br /><br /><br /><br /></div> <div class="right">右边</div> </div> <div class="bottom">尾部</div> </body> </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=utf-8" /> <title>等高(边框)实现(www.hemin.cn)</title> <style type="text/css"> *{ margin:0; padding:0;} body{ margin:10px;} .top,.midst,.bottom{width:600px;} .left,.right{float:left;} .top{ height:100px; margin-bottom:10px;background:#808000;} .midst{ overflow:hidden; border-right:390px solid #008000; width:210px; } .left{ width:200px; display:inline; background:#f00;} .right{width:390px; display:inline; position:absolute; left:220px;} .bottom{ margin-top:10px; height:100px; background:#A65300;} </style> </head> <body> <div class="top">头部</div> <div class="midst"> <div class="left">左边<br /><br /><br /><br /><br /><br /><br /></div> <div class="right">右边</div> </div> <div class="bottom">尾部</div> </body> </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=utf-8" /> <title>等高(套标签)实现(www.hemin.cn)</title> <style type="text/css"> *{ margin:0; padding:0;} body{ margin:10px;} .top,.midst,.bottom{width:600px;} .warp{overflow:hidden;position:relative;width:600px;background:#008000;} .coll_left{float:left;left:50%;padding-bottom:15px;position:relative;width:50%;} .top{ height:100px; margin-bottom:10px;background:#808000;} .midst{ background:#FFFFFF;float:left;margin-left:-40px;position:relative;right:100%;width:141.6%;} .left{ margin:0 10px -32767px 215px;overflow:hidden;background:#f00;padding-bottom:32767px;} .right{float:right;left:390px;position:relative;width:390px;} .bottom{ margin-top:10px; height:100px;background:#A65300;} </style> </head> <body> <div class="top">头部</div> <div class="warp"> <div class="midst"> <div class="coll_left"> <div class="left">左边<br /><br /><br /><br /><br /><br /></div> </div> <div class="right">右边</div> </div> </div> <div class="bottom">尾部</div> </body> </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=utf-8" /> <title>等高(JS)实现</title> <style type="text/css"> *{ margin:0; padding:0;} body{ margin:10px;} .top,.midst,.bottom{width:600px;} .left,.right{float:left; } .top{ height:100px; margin-bottom:10px;background:#808000;} .midst{ overflow:hidden;zoom:1;} .left{ width:200px; display:inline; background:#f00;} .right{width:390px; margin-left:10px; display:inline; background:#008000;} .bottom{ margin-top:10px; height:100px; background:#A65300;} </style> <script type="text/javascript"> function alignHeight(eleA,eleB){ if(!document.getElementById(eleA)){return false;} if(!document.getElementById(eleB)){return false;} var heightA = document.getElementById(eleA).clientHeight; var heightB = document.getElementById(eleB).clientHeight; if(heightA > heightB){ document.getElementById(eleB).style.height = heightA + "px"; document.getElementById(eleA).style.height = heightA + "px"; }else{ document.getElementById(eleA).style.height = heightB + "px"; document.getElementById(eleB).style.height = heightB + "px"; } } window.onload = function z_align(){ alignHeight("a","b"); //只需将需要对齐的两个模块的id写在此处即可。 //alignHeight(”AAA”,”BBB”) 可依此连续多组。 } </script> </head> <body> <div class="top">头部</div> <div class="midst"> <div id="a" class="left">左边<br /><br /><br /><br /><br /><br /><br /></div> <div id="b" class="right">右边</div> </div> <div class="bottom">尾部</div> </body> </html>

提示：你可以先修改部分代码再运行。