stackoverflow - Css3 calc()定制自适应宽度

问题描述

casperOne：我想用CSS设置一个50px的 p ，不能超过100%宽度，也不用JavaScript。如何实现？

问题解答

Derek：可以实现，但不需要用IE的expression()，而是用CSS3中的Calc()即可。

p { width: 100%; width: -webkit-calc(100% - 50px); width: -moz-calc(100% - 50px); width: calc(100% - 50px);}

Demo: http://jsfiddle.net/thirtydot/Nw3yd/66/

这样很方便，但需要注意的是目前支持CSS3的仅有3款浏览器：Firefox，Google Chrome(WebKit)和IE9

关于Calc属性详解：https://developer.mozilla.org/zh-CN/docs/CSS/calc