css - 为什么 CSS calc(100%-250px) 不起作用?

标签 css

<分区>

我已经在最新版本的 Firefox、Chrome、IE 11 中对其进行了测试。在这些浏览器中,当您使用 CSS calc() 函数计算例如宽度。据我所知,我已经正确应用了它。作为引用,您可能需要检查

http://www.sitepoint.com/css3-calc-function/

为什么这不起作用?

div {
  background-color: blue;
  height: 50px;
  width: calc(100%-250px);
}
<div></div>

演示:

http://codepen.io/anon/pen/wazZWm

http://jsfiddle.net/h5mzcow1/

编辑:

是的,这个问题在许多编辑过程中发展成为重复,但我仍然认为它应该保留在这里,因为它比例如 CSS calc() not working 更能说明问题。 .另外,恕我直言,答案要好得多。

最佳答案

这是因为您必须在 +- 运算符之间放置一个空格 才能使其正常工作。

div {
  background-color: blue;
  height: 50px;
  width: calc(100% - 250px);
}
<div></div>

来自 MDN 文档:

Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

Source: MDN

W3C Documentation

关于css - 为什么 CSS calc(100%-250px) 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30412580/

相关文章:

php - 显示从数据库到 Bootstrap 轮播的多个图像

css - 所有标签后代的选择器

javascript - 如何修复打开并刷新页面后自动关闭的弹出窗口?

html - CSS 中的用户配置文件状态

javascript - IE8 中空 div 层的 z-index 问题

css - 子元素上的 z-index 问题

android - Twitter Bootstrap 导航栏下拉菜单不起作用

html - CSS chalice 与有序列

javascript - 如何使文本自动出现在 HTML 页面中的所有 blockquote 之后?

javascript - 防止应用程序拖动但允许在 ios 中滚动内部 div 元素