1.應用場景
左側一個導航欄寬度固定，右側內容根據用戶瀏覽器窗口寬度進行自適應
2.思路
首先把這個問題分步解決，需要攻克以下兩點：
1）讓兩個div並排到一行
2）讓一個div寬度固定，另個div佔據剩下寬度的空間
關於第一點，首先要明確，div屬於塊級元素，在文檔標準流中單獨佔據一行。要想多個div在一行，就可以想辦法讓div脫離標準流，比如使用float或者absolute；
關於第二點，首先有一個寬度固定的div，另外自適應的div寬度是多少？首先這個寬度不能寫“100%”，因爲這裏的100%是相對於第一個非靜態祖先元素的，也就是說如果這樣寫，頁面會出現整個頁面寬度+左邊固定列寬度的情形。那麼對自適應寬度的div處理方法是不去設置它的width屬性，瀏覽器會自動計算後讓它佔一行，接下來給他設置margin-left屬性把左側固定列空間空出即可。
3.實現
1）html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="task001.css">
<meta charset="utf-8">
</head>
<body>
<!-- 左側固定列 -->
<div class="fixedColumn"></div>
<!-- 右側自適應寬度列 -->
<div class="flexibleColumn"</div>
</body>
</html>
2）css
/*左固定列*/
.fixedColumn{
width: 40px;
height: 100%;
background-color: red;
float: left;
/*position: absolute;
left: 0;*/
}
/*右自適應列*/
.flexibleColumn{
height: 100%;
background-color: blue;
margin-left: 40px;
}
注：
1）fixedColumn 裏註釋的方法即絕對定位的實現方式，取消註釋後把float那句註釋掉，可以實現相同的效果
2）使用float需要注意清除浮動造成父元素塌陷的問題（這裏不用清除，因爲自適應列和固定列一樣高，在標準流中可以撐起父元素）
4.小結
一定要自己實現試試，注意只有固定列脫離了文檔流，自適應列還在文檔流中！其他沒什麼要說的了，但是應該還有更好的方法，等我看到了一併總結過來~