先加载主区域的等高布局，并且左侧定宽，右侧自适应

要想先加载主区域，需要把主区域写在前面，这里可以给sider一个固定宽度和浮动，并且margrin-left:-100%;把sider强行拿到最左边。

等高布局有几种方法，我这里用的是兼容性较好的margin,padding法，先给每列一个足够的padding-bottom,以至于当其他列过高的时候可以补足，然后在给每列一个负的margin-bottom,最后给父级div一个overflow:hidden，就可以隐藏多出的部分实现等高。

html代码如下：

<div id="wrap">
        <div class="main">
            <div class="content">
                <p>自适应区域</p>
                <p>自适应区域</p>
                <p>自适应区域</p>
            </div>
        </div>
        <div class="sider-l">左侧定宽</div>
    </div>

css代码

    <style>
        #wrap{
            overflow: hidden;
        }
        .main{
            float: left;
            width: 100%;
            background: #eee;
            padding-bottom: 100px;
            margin-bottom: -100px;
            
        }
        .main .content{
            margin-left: 200px;
            margin-right: 200px;
        }
        .sider-l{
            width: 200px;
            float: left;
            margin-left: -100%;
            background: #666;
            padding-bottom: 100px;
            margin-bottom: -100px;
        }
        
    </style>