css兼容全部瀏覽器的寬度計算方法，非calc

做爲一個前端，所見的最多的就是左右佈局的狀況，不管框架仍是各類寫法中都有左右佈局，然而有些狀況下很是讓人頭疼，那就是一側固定寬度，另外一側根據屏幕或者外層寬度自動適應，例如表單：

如圖所示：左右佈局，可是左側按照百分比排版的，在屏幕小的狀況下很是擁擠，在屏幕寬的時候很是寬鬆，不可以作到左邊固定寬度（由於左側是固定的幾個文字），右側自動適應。相似問題還有N多，好比後臺界面左右佈局形式，tab選項卡左右佈局形式等等。

1、使用JavaScript來計算的弊端

1. 麻煩，寫一大堆，而後不必定對。
2. 效率低，改變屏幕或者改變外層div寬度，效率極低。
3. 樣式和JavaScript不分開，很是不規整。

2、使用css3的calc計算的弊端

弊端：一言以蔽之，兼容性很差
優勢：簡單易用，效率高，能解決兼容性是最好不過了，能不能使用css2.0來寫出這個效果呢，答案是能！

3、使用定位法實現calc

具體的佈局如上，父元素定位，左側固定寬度的元素定位，右側自動適應寬度，使用padding來撐開被定位元素佔有的那部分，這樣就能達到右側寬度根據父元素的寬度適應，並且左側達到固定寬的效果。左右顛倒亦如此。
優勢：

1. 兼容全部瀏覽器
2. 容易理解，效率高

注意：
盒子的總體高度，是那個非定位元素撐開的，因此在書寫的過程當中必定要注意誰撐開的整個父層，如此例中，若是右側高度很低，那麼左側由於定位是沒法撐開的（左側也可考慮使用絕對定位，或者使用min-height等，你們能夠試驗一下。）。