css实现左栏固定右栏自适应，高度自适应的布局

　　收集css中的基础知识，所以这并不是什么新鲜的技术，只是作为备忘~本文的内容如题所示，是一个简单的布局，用于左右两栏布局的页面，左侧是固定宽度，右侧占据剩余的宽度。在垂直方向，始终以高度最大的一栏为基准，例如，随着右侧面板中动态添加内容高度增加，左侧也跟着增加，这样不会产生的难看的像这样的情况：

　　实现该布局的代码如下：

<style type="text/css">
    #content{
        border:5px solid blue;
        overflow: hidden;
    }
    #leftpanel{
        background-color: red;
        width: 300px;
        height: auto;
        float: left;
        padding-bottom: 3000px;
        margin-bottom: -3000px;
    }
    #right{padding-left: 300px;}
    #rightpanel{
        background-color: green;
        height: 100px;
        padding-bottom: 3000px;
        margin-bottom: -3000px;
    }
</style>
<div id="content">
    <div id="leftpanel">
        <ol>
            <li>sdfdf</li>
            <li>sdfdf</li>
            <li>sdfdf</li>
            <li>sdfdf</li>
        </ol>
    </div>
    <div id="right">
        <div id="rightpanel"></div>
    </div>
</div>

效果如下：

<!–
#mycontent{
border:5px solid blue;
overflow: hidden;
}
#myleftpanel{
background-color: red;
width: 300px;
height: auto;
float: left;
padding-bottom: 3000px;
margin-bottom: -3000px;
}
#myright{padding-left: 300px;}
#myrightpanel{
background-color: green;
height: 100px;
padding-bottom: 3000px;
margin-bottom: -3000px;
}
–>

add left width add left height subtract left height add right height subtract right height

1. sdfdf
2. sdfdf
3. sdfdf
4. sdfdf