Css布局系列-上下兩欄布局

標籤：

上下兩欄布局，這個在做資訊系統的時候我感覺用得比較多。結合前面布局的介紹，改天給介紹一個稍微比較複雜的真實資訊系統布局。請看：

要點：最頂一欄給其固定高度，下面一欄高寬度讓其自撐，如果該欄的內容溢出，設定overflow屬性為auto，允許其出現捲軸。下面一欄必須給設定絕對位置，他top的距離就是等於頂欄的高度且bottom等於0，就會自動拉升高度。

*{margin: 0;padding: 0;}html, body{height: 100%;}        .container{height: 100%;}.top{width: 100%;height: 60px;background-color: #241fed;}.middle{width: 100%;top: 60px;background-color: #e30;position: absolute;bottom: 0;overflow: auto;}

  <div class="container">        <div class="top">        </div>        <div class="middle">            上下布局，下面高度自撐。        </div>    </div>

　　

Css布局系列-上下兩欄布局