CSS学习笔记之三列页面布局（二）

接着上次，继续学习三列页面布局结构。

一、三列宽度自适应结构

三列宽度自适应只需要把上次的左侧定宽右侧和中间自适应稍作修改就可以了。先保持上次的HTML结构不变

<div id="header">这里是头部信息</div>
<div id="container">
    <div class="mainBox">
        <div class="content">这里是主要内容区域让他宽一些他宽一些他宽一些他宽一些他宽一些他宽一些</div>
    </div>
    <div class="subMainBox">
        <p>这里是次要内容区域</p>
        <p>这里有两行</p>
    </div>
    <div class="sideBox">
        <p>这里是侧边栏</p>
        <p>这里有三行</p>
        <p>这里有三行</p>
    </div>
</div>
<div id="footer">这里是底部信息</div>

只需要稍作修改CSS代码，魅力就在于此！

<style type="text/css">
    ……
    .mainBox .content{
        background-color: #333;
        margin: 0 21% 0 41%;
    }
    .subMainBox{
        float: left;
        width: 20%;
        margin-left: -20%;
        background-color: #666;
    }
    .sideBox{
        float: left;
        width: 40%;
        margin-left: -100%;
        background-color: #666;
    }
    ……
</style>

一个三列自适应的页面结构就这样轻松实现

二、三列等高

三列等高的原理和两列等高/)的原理几乎相同，所以原理性的东西不多做介绍，只是再实现一次加深下印象。

1、背景模拟

使用这种方法必须保证三列的宽度固定，而且三列的位置关系因为背景图不能随意的更换。HTML代码如下：

<div class="header">头部信息</div>
<div class="container">
    <div class="mainBox">
        <div class="content">
            <p>主要内容区域</p>
            <p>多添加几行</p>
            <p>更能看得清楚到底是是不是等高</p>
            <p>再来一行</p>
            <p>再来一行</p>
            <p>再来一行</p>
        </div>
    </div>
    <div class="subMainBox">次要内容区域</div>
    <div class="sideBox">侧边栏</div>
</div>
<div class="footer">底部信息</div>

CSS代码如下：

<style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        .header, .footer {
            width:960px;
            height:30px;
            line-height:30px;
            text-align:center;
            color:#FFFFFF;
            background-color:#AAAAAA;
        }
        .container {
            float:left;
            width:960px;
            text-align:center;
            color:#FFFFFF;
            background:url(images/bg2.png) repeat-y 0 0;
        } 
        .mainBox {
            float:left;
            width:960px;
        } 
        .mainBox .content {
            width:440px;
            margin:0 210px 0 310px;
            color:#000000;
        } 
        .subMainBox {
            float:left;
            width:300px;
            margin-left:-960px;
        } 
        .sideBox {
            float:left;
            width:200px;
            margin-left:-200px;
        } 
        .footer {
            clear:both;
        }
    </style>

刷新浏览器可以看到等高的视觉效果：

2、负边距实现

用负边距实现等高的视觉效果，保证HTML结构不变，只需要修改下CSS代码即可:

<style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    .header, .footer {
        width:960px;
        height:30px;
        line-height:30px;
        text-align:center;
        color:#FFFFFF;
        background-color:#AAAAAA;
    }
    .container {
        float:left;
        width:960px;
        text-align:center;
        color:#FFFFFF;
        overflow: hidden;
        /*background:url(images/bg2.png) repeat-y 0 0;*/
    } 
    .mainBox {
        float:left;
        width:960px;
        margin-bottom:-9999px;
        padding-bottom:9999px;
    } 
    .mainBox .content {
        width:440px;
        margin:0 210px 0 310px;
        background-color:#000000;
    } 
    .subMainBox {
        float:left;
        width:300px;
        margin-left:-960px;
        margin-bottom:-9999px;
        padding-bottom:9999px;
        background-color: #333;
    } 
    .sideBox {
        float:left;
        width:200px;
        margin-left:-200px;
        margin-bottom:-9999px;
        padding-bottom:9999px;
        background-color: #666
    } 
    .footer {
        clear:both;
    }
</style>

效果如下图：

在上一个方法中用图片背景来模拟的时候，三列的宽度必须是固定的。而我们采用负边距实现的三列等高是可以在自适应的三列结构中使用的。代码就不贴了，简单修改下代码可以自己试试。（其实是我懒(-__-)b）

3、边框模拟

边框模拟其实是一种非常不实际的方法，但是为了展现CSS的“魅力”，就再实现一遍。采用绝对定位的方式，将次要内容区域和侧边栏定位在主要内容区域的两侧，利用主要内容区域的左右两侧边框来模拟两侧的背景色。
在保持原来的HTML结构的基础上，修改CSS代码如下：

<style type="text/css">
    ……
    .container {
        position: relative;
        width:960px;
        text-align:center;
        color:#FFFFFF;
    } 
    .mainBox {
        width:960px;
    } 
    .mainBox .content {
        border-left:310px solid #999;
        border-right:210px solid #333;
        color: #666;
    } 
    .subMainBox {
        position: absolute;
        width:300px;
        top:0;
        left:0;
    } 
    .sideBox {
        position: absolute;
        width:200px;
        top:0;
        right:0;
    } 
</style>

刷新一下页面：

在两列等高中用边框模拟所带来的问题依然会出现在三列页面结构中 这种不推荐的方式只是为了展现CSS的“魅力”！

4、其他方式

这里用js来完成三列的真正等高！
HTML代码：

<div class="header">头部信息</div>
<div class="container">
    <div class="mainBox">
        <div class="content" id="m_content">
            <p>主要内容区域</p>
            <p>多添加几行</p>
            <p>更能看得清楚到底是是不是等高</p>
            <p>再来一行</p>
            <p>再来一行</p>
            <p>再来一行</p>
        </div>
    </div>
    <div class="subMainBox" id="subMainBox">次要内容区域</div>
    <div class="sideBox" id="sideBox">侧边栏</div>
</div>
<div class="footer">底部信息</div>

CSS代码只需要对两列定宽中间自适应页面结构中的代码稍作修改，去掉高度属性。

<style type="text/css">
    - {
        margin:0;
        padding:0;
    }
    .header, .footer {
        width:960px;
        height:30px;
        line-height:30px;
        text-align:center;
        color:#FFFFFF;
        background-color:#AAAAAA;
    }
    .container {
        width:960px;
        text-align:center;
        color:#FFFFFF;
    }
    .mainBox {
        float:left;
        width:960px;
    }
    .mainBox .content {
        margin:0 210px 0 310px;
        background-color:#000000;
    }
    .subMainBox {
        float:left;
        width:300px;
        margin-left:-100%;
        background-color:#666666;
    }
    .sideBox {
        float:left;
        width:200px;
        margin-left:-200px;
        background-color:#333333;
    }
    .footer {
        clear:both;
    }
</style>

我们的JavaScript代码如下，对了，这里先挖个坑吧。等专门写到JavaScript文章的时候再自己解释这段JavaScript代码！O(∩_∩)O哈哈~

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

效果如下图：

OK 三列的页面结构终于写完了！容我去B站补几部番缓缓 ԅ( ¯་། ¯ԅ)