左边固定，右边自适应布局

方法一：

<style>
        #aside {
            float: left;
            width: 200px;
            background-color: red;
        }

        #content {
            margin-left: 200px;
            background-color: blue;
        }
    </style>
    <div id="aside">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati
        totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
    </div>
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati
        totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
    </div>

方法二：

<style>
            #wrap {
                overflow: hidden;
                *zoom: 1;
            }

            #content,
            #sidebar {
                background-color: #eee;
            }

            #sidebar {
                float: right;
                width: 300px;
            }

            #content {
                margin-right: 310px;
            }

            #footer {
                background-color: #f00;
                color: #fff;
                margin-top: 1em
            }
        </style>
        <div id="wrap">
            <div id="sidebar" style="height:240px;">固定宽度区</div>
            <div id="content" style="height:340px;">自适应区</div>
        </div>
        <div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>

 

转载于:https://www.cnblogs.com/sangzs/p/9020258.html