本文由大漠根据Osvaldas Valutis的《Imitating calc() Fallback or Fixed-Width Sidebar In Responsive Layout》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout，以及作者相关信息
——作者：Osvaldas Valutis
——译者：大漠
处理CSS的浏览器兼容性和解决技术问题才能尽显前端开发人员真正的魅力。没有项目可做的情况之下，我终于有了一次机会使用cale()函数的经验。
使用calc()，您可以通过计算来确定CSS属性值。
如果你还从未接触过
calc()，你可以通过阅读《CSS3的calc()使用》一文来了解有关于calc()的基础知识——大漠
我想你可能知道，我也知道你已经看到这些例子，甚至在首页尝试使用过：
div{
width: calc( 100% - 2.5em );
background-position: calc( 50% + 50px );
margin: calc( 1.25rem - 5px );
}
正如你所看到的，编写calc()需要一个更高的CSS水平。它是如此强大，前端开发人员不知道如何处理它。现在主流的浏览器(Android4.4)都支持这功能。
明智的做法就是开始使用它。
情况
想象一上这种标准，是多么的痛苦：主内容和侧边栏通过浮动并列在一起，两者之间有一个间距。
通常有一个容器包含了两个div，并且设置样式：
HTML
<div class="container">
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>
</div>
CSS
.container:after,
.container:before {
content:"";
display: table;
}
.container:after {
clear:both;
overflow: hidden;
}
.container {
zoom:1;
}
.container,
.content,
.sidebar{
box-sizing: border-box;
color: #fff;
}
.container{
width: 100%;
max-width: 80em; /* 1280 */
padding: 2.5em; /* 40 */
background: #eee;
}
.content,
.sidebar {
padding:10em 1.25em;
}
.content{
width: 80%; /* 960 */
float: left;
background: #8ac233;
}
.sidebar{
width: 16.666%; /* 200 */
float: right;
background: #8ac233;
}
@media only screen and (max-width: 40em) /* 640 */{
.content,
.sidebar{
width: 100%;
float: none;
}
.sidebar{
margin-top: 1.25em; /* 20 */
}
}
看起来像一个完美的响应式布局和什么都没有添加，但是...
问题
在我们的布局中有一个初始的小的侧栏和宽的内容区域。因此，当调整视窗大小，侧边栏很快变得紧紧的。当侧边栏太狭窄的时候我们应该做什么，过早移动内容？
解决方案
通过calc()函数计算宽度，并给不支持calc的浏览器提供一个后备方案，就是固定宽度。通过给.content和.sidebar两个类上做一个小小的修改，将会改变你的一切：
.content{
width: 80%; /* 960 */
width: calc( 100% - 15em ); /* 240 */
float: left;
background: #8ac233;
}
.sidebar{
width: 16.666%; /* 200 */
width: calc( 12.5em ); /* 200 */
float: right;
background: #8ac233;
}
如果你细心的话，你应该看到多添加了一行width:calc(12.5em)，这就是技巧。为什么？让我们看看这些宽度都是成对——下在我们浏览器需要的。
第一对是width:80%(主内容)和width:16.666%（侧边栏），不支持calc()的浏览器将会无视calc()。这是用来做备份的。这意味着少数访问者访问网站看到窄的侧边栏。对于使用旧的浏览版本的人应该是完美的。
第二对是：width:calc(100% - 15em)和width: calc(12.5em)。这是用于新的浏览器版本，这将会覆盖前面定义的固定宽度。有几个方面需要作个解释：
- 主内容：
calc(100% - 15em)= 100% - 侧边栏宽度 - 间距宽度。除了计算主内容元素的宽度，也要确保侧栏和主内容之间的间距总是等于2.5em(40px)。这样就完美。 - 侧边栏：
calc(12.5em)。可能有人会问，这里括号要添加空格吗？这是一个欺骗浏览器的伎俩。我把这称作为“模仿calc()备份”，但实际上它是不用也可括号也可以。
到了演示时间!我做了一个按钮开关来控制calc()，你可以试试：
还有一件事
就像其他的一些CSS特性，calc()还是一个实验属性，在特定的浏览器下还需要添加特定的前缀。让更多的浏览器得到支持：
.content{
width: 80%; /* 960 */
width: -webkit-calc( 100% - 15em ); /* 240 */
width: calc( 100% - 15em ); /* 240 */
float: left;
background: #8ac233;
}
.sidebar{
width: 16.666%; /* 200 */
width: -webkit-calc(12.5em); /* 200 */
width: calc(12.5em); /* 200 */
float: right;
background: #8ac233;
}
有一种情况不能使用calc()，这是通过CSS的position属性。然而，如果侧边栏高于内容区域，整个布局会失败（这是你不希望看到的）。
通过一个简单的示例，向大家演示了如何使用CSS的
calc()属性，给元素设置表达式，通过浏览器自身去计算需要的值。从而达到完美的自适应效果。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载，烦请注明出处：
英文原文：http://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout
中文译文：http://www.w3cplus.com/css3/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout.html