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

作为一个前端，所见的最多的就是左右布局的情况，无论框架还是各种写法中都有左右布局，然而有些情况下非常让人头疼，那就是一侧固定宽度，另一侧根据屏幕或者外层宽度自动适应，例如表单：

如图所示：左右布局，但是左侧按照百分比排版的，在屏幕小的情况下非常拥挤，在屏幕宽的时候非常宽松，不能够做到左边固定宽度（因为左侧是固定的几个文字），右侧自动适应。类似问题还有N多，比如后台界面左右布局形式，tab选项卡左右布局形式等等。

一、使用JavaScript来计算的弊端

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

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

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

三、使用定位法实现calc

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

1. 兼容所有浏览器
2. 容易理解，效率高

注意：
盒子的整体高度，是那个非定位元素撑开的，所以在书写的过程中一定要注意谁撑开的整个父层，如此例中，如果右侧高度很低，那么左侧因为定位是无法撑开的（左侧也可考虑使用绝对定位，或者使用min-height等，大家可以试验一下。）。