我熟知的三栏自适应高度的布局

导语：

最近，一个朋友问我大家耳熟能详的一些网页布局，由于平时仅为了实现某些布局而无暇总结，在此对个别典型布局进行一个小结，以此供大家研究。

一个三栏的自适应高度的布局：

方案一（绝对定位）：

页面html:

<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>

页面css:

html, body
        {
            margin: 0px;
            height: 100%;
        }
        #left, #right
        {
            position: absolute;
            top: 0px;
            width: 200px;
            height: 100%;
        }
        #left
        {
            left: 0px;
            background-color: Yellow;
        }
        #right
        {
            right: 0px;
            background-color: red;
        }
        #middle
        {
            background-color:Blue;           
            margin:0px 210px;
            height:100%;
        }

方案二（float方式）：

页面html:

<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>

页面css:

    html,body{margin:0px; height:100%;}
    #left,#right{ width:200px; height:100%;}
    #left{ float:left; background-color:Yellow;}
    #right{ float:right; background-color:Blue;}
    #middle{ margin:0px 210px; background-color:Green; height:100%; }

以上方案完全兼容所有浏览器，大家可以放心使用。