兩欄佈局

兩欄佈局一般指左右兩邊其中一邊為定寬，另一邊為自適應寬度。如圖：

實現

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>

html, body{
    height: 100%;
    margin: 0;
}

.wrap{
    height: 100%;
    position: relative;
}

.wrap .left{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: orange;
}

.wrap .right{
    height: 100%;
    margin-left: 300px;
    background-color: salmon;
}
 

本文是按照左欄定寬右欄自適應實現的，反之亦可。