css兼容全部浏览器的宽度计算方法，非calc

做为一个前端，所见的最多的就是左右布局的状况，不管框架仍是各类写法中都有左右布局，然而有些状况下很是让人头疼，那就是一侧固定宽度，另外一侧根据屏幕或者外层宽度自动适应，例如表单：

如图所示：左右布局，可是左侧按照百分比排版的，在屏幕小的状况下很是拥挤，在屏幕宽的时候很是宽松，不可以作到左边固定宽度（由于左侧是固定的几个文字），右侧自动适应。相似问题还有N多，好比后台界面左右布局形式，tab选项卡左右布局形式等等。

1、使用JavaScript来计算的弊端

1. 麻烦，写一大堆，而后不必定对。
2. 效率低，改变屏幕或者改变外层div宽度，效率极低。
3. 样式和JavaScript不分开，很是不规整。

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

弊端：一言以蔽之，兼容性很差
优势：简单易用，效率高，能解决兼容性是最好不过了，能不能使用css2.0来写出这个效果呢，答案是能！

3、使用定位法实现calc

具体的布局如上，父元素定位，左侧固定宽度的元素定位，右侧自动适应宽度，使用padding来撑开被定位元素占有的那部分，这样就能达到右侧宽度根据父元素的宽度适应，并且左侧达到固定宽的效果。左右颠倒亦如此。
优势：

1. 兼容全部浏览器
2. 容易理解，效率高

注意：
盒子的总体高度，是那个非定位元素撑开的，因此在书写的过程当中必定要注意谁撑开的整个父层，如此例中，若是右侧高度很低，那么左侧由于定位是没法撑开的（左侧也可考虑使用绝对定位，或者使用min-height等，你们能够试验一下。）。