您的位置：首页 > Web前端 > CSS

三列布局，读《css那些事儿》

2015-11-16 15:33 465 查看

1、两列定宽，中间自适应

要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动

原理：mainbox的浮动并将其宽度设置为100%，次要内容及侧边栏设置固定宽度并浮动，mainbox中的.contentd的默认宽度设置为值（auto），margin左右所留的空白等于两列的宽度，并利用负边距原理将次要内容和侧边栏“引”到主要内容的两边。

//div等高控制
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);}
}
//调用方法<body onload="equalColumns('subMainBox','m_content','sideBox')">
//subMainBox，m_content，sideBox就是你希望高度相等的div的id值

js部分

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航