 |
经典布局3列1行高度自适应相等的方法
来源：本站整理
作者：不详
日期：2008-8-6
网页设计中，布局起着至关重要的作用，一个好的布局可以让你接下来的工作得心应手，省去好多时间。传统的网页布局往往都是三列式－左中右结构，如何能让三列永远都能保持同一高度，或者说左右两列始终跟随中列的变化而变化呢？
这个问题，在Table中很好解决：只要插入一个1行3列的表格就可以；如何在Div中很好的处理呢？以前往往都是给三列固定同一高度，写死在div中。但这样有一个问题就是只要网页内容有更新，就要手动调整一次各列的高度，很是麻烦……
今天终于找到一种很好的方法，个人认为很不错，分享与大家：
<style>
<!--
#main1{
height:10px;
width:200px;
font-size:12px;
background:#0000FF;
margin-top:10px;
}
#main2{
height:10px;
width:200px;
font-size:12px;
background:#ff0000;
margin-top:10px;
}
#main3 {
height:10px;
width:200px;
font-size:12px;
background:#000000;
margin-top:10px;
}
-->
</style>
<script language=javascript>
function resetDiv(){
var m1=document.getElementById("main1");
var m2=document.getElementById("main2");
var m3=document.getElementById("main3");
if(m1.offsetHeight>m2.offsetHeight || m3.offsetHeight>m2.offsetHeight ){
m2.style.pixelHeight=m1.offsetHeight;
m2.style.pixelHeight=m3.offsetHeight;
}
else{
m1.style.pixelHeight=m2.offsetHeight;
m3.style.pixelHeight=m2.offsetHeight;
}
}
</script>
<body onload="resetDiv()">
<div style="float:left;">
<div id=main1></div>
</div>
<div style="float:left;">
<div id=main2><br />中栏自由改变高度<br />左右两栏跟着相应变化<br /><br /><br /><br /></div>
</div>
<div style="float:left;">
<div id="main3"></div>
</div>
</body>
这个问题，在Table中很好解决：只要插入一个1行3列的表格就可以；如何在Div中很好的处理呢？以前往往都是给三列固定同一高度，写死在div中。但这样有一个问题就是只要网页内容有更新，就要手动调整一次各列的高度，很是麻烦……
今天终于找到一种很好的方法，个人认为很不错，分享与大家：
<style>
<!--
#main1{
height:10px;
width:200px;
font-size:12px;
background:#0000FF;
margin-top:10px;
}
#main2{
height:10px;
width:200px;
font-size:12px;
background:#ff0000;
margin-top:10px;
}
#main3 {
height:10px;
width:200px;
font-size:12px;
background:#000000;
margin-top:10px;
}
-->
</style>
<script language=javascript>
function resetDiv(){
var m1=document.getElementById("main1");
var m2=document.getElementById("main2");
var m3=document.getElementById("main3");
if(m1.offsetHeight>m2.offsetHeight || m3.offsetHeight>m2.offsetHeight ){
m2.style.pixelHeight=m1.offsetHeight;
m2.style.pixelHeight=m3.offsetHeight;
}
else{
m1.style.pixelHeight=m2.offsetHeight;
m3.style.pixelHeight=m2.offsetHeight;
}
}
</script>
<body onload="resetDiv()">
<div style="float:left;">
<div id=main1></div>
</div>
<div style="float:left;">
<div id=main2><br />中栏自由改变高度<br />左右两栏跟着相应变化<br /><br /><br /><br /></div>
</div>
<div style="float:left;">
<div id="main3"></div>
</div>
</body>