问题标签 [css-calc]

我正在尝试创建一个宽度和高度为视图宽度的 37% 的 div。

我希望 div 居中，所以我尝试取 50% 的视图宽度并减去 37% 的值。

然后我希望 div 位于父 div 之外的 50%。它基本上是带有个人资料图像的封面照片。底部位置需要为负数，以便将业务封面徽标强制放在业务视图包装之外，我能想到的唯一方法是乘以一个负数。

使用固定值的示例。

受这个问题的启发，我发现了这个有趣的现象。

由于负宽度是非法的，因此应该被忽略，我希望样式属性像width:-200px;和width:calc(0% - 200px);没有效果。事实上，对于第一个它没有。然而，第二个并没有被忽略：而是使用 0 的宽度。

看这个例子：

如果 width 属性被忽略，则 div 将是其全宽（如顶部）。但是，它被折叠为 0（见左边的黑线；那是边界）。

作为参考，这里有一些其他的 div，以证明 1) 其calc(0% - 200px)本身不是错误，以及 2) 它们工作正常并且第一个片段是异常的。

那么，为什么正常宽度和计算宽度的行为不同呢？
如果它只是一个浏览器，我会称之为错误。但他们都以同样的方式对待这个！所以一定有我忽略的东西。什么？

有人可以描述Calc()在 css 中的使用吗？~符号的含义是什么Calc()？

下面的代码如何计算？

我有一个ul元素和 5 个孩子<li>。

有<ul>一个display: flex属性。我尝试使用 calc 属性<li>来均匀调整列表项的大小：

这给出了所需的结果并均匀地调整了 5<li>个块的大小

现在我在所有的右侧添加了边框，但最后一个子<li>元素。所以我从<ul>.

这也可以正常工作并均匀地调整<li>带有边框的块的大小。

现在我尝试在视口单位vw而不是 px 中设置边框宽度，但它给出了不同的结果。

从上面的代码片段可以看出，右边有一点空间。这会随着更宽的视口而变得更大（尝试查看片段完整页面）。所以我认为问题在于vw这里的单位和弹性盒。

那么这个错误的原因是什么？

编辑：

从提供的答案和评论中，我看到还有其他更合适的方法来实现我想要做的事情。我很欣赏这些答案，但这些不是我问题的答案。由于calc在这种情况下显示错误，因此当我尝试calc在其他情况下（不仅仅是边框）使用和视口单位时，很可能会导致更多问题。所以我需要知道原因并“ calc”修复。

我有一个width: calc(100% - 100px);没有填充/边距/边框的输入。我想在它旁边放一个 divposition : inline-block;和width : 100px;。

div 转到下一行，但我找不到任何原因。如果我将 div 宽度减小到 96px，那么它工作正常。我想知道是什么导致了 4px 缺少宽度！

请注意，box-sizing : borderbox这与此问题无关，因为我没有任何填充或边框。

这是plunker，用 chrome 和 firefox 测试过。

在 SASS 中，我的计算看起来像calc(50% - 375px);但是当它编译 CSS 输出时看起来像：calc(-325%)，这显然不是我的想法。

我怎样才能强迫 SASS 不做数学(50% - 375px)？

谢谢您的帮助！

这是我的代码（后解释）：https ://jsfiddle.net/L7a35dda/1/

上面的代码旨在将屏幕分成三组图块：

• 第 3 组占据屏幕的整个右侧 - 它的宽度是可配置的（目前设置为 50%）。它的内容可以忽略，因为它目前是未来发展的占位符。
• 第 1 组占据屏幕左侧剩余部分的上半部分，包含 6 个 3x2 布局的方形图块。每个瓦片的宽度应该相等。
• 第 2 组填充第 1 组下方的最后剩余空间。它在垂直布局中有 2 个图块，跨越整个可用宽度和高度，在它们之间均匀分布垂直空间。

所以代码似乎做了我需要做的所有事情，除了我需要第 1 组图块为方形的部分。我目前正在硬编码它作为这个问题的占位符——这在实际产品中无法完成，因为它将通过网络部署到多台机器上，渲染到不同屏幕分辨率的不同媒体上。

我应该如何更改我的代码来实现这一点？

编辑：将问题标题从 iframe 更改为 div，因为问题最初是针对该问题的，尽管最终发布的问题是针对 tile div 的。

似乎 IE11 在理解 calc() css 属性方面存在一些问题。

我以这种方式使用带有线性梯度的 calc：

但是当我这样使用它时：

它可以正常工作。

还有一件事我不明白。当我在 IE11 中检查该属性时，将其关闭并重新打开即可。

使用 calc(50% - 1px) 的重点是角度看起来更平滑，就是这样。

有什么建议么？

我正在尝试用 aheight: calc(100% - 80px)和 an制作一个 div overflow: scroll。div 完全忽略了这两个规则。这是我尝试过的：

请提醒我哪里出了问题以及如何解决问题。

I have some problems on how to program a responsive "content" box from bootstrap. As in the JsFiddle-Link shown I want to make the inner of the Bootstrap content-inner responsive.

In the content-inner box i have

• one div which has a fixed width (red)

• the second container (an article container) is the container which should take the remaining space of the page (so as the height gets bigger the white background should get bigger and the top and bottom grey space smaller). This Container has also an overflow-y but the overflow-x is hidden because of the scroll bar on the right there would also be a scrollbar at the bottom. (green)

• and the third one has a fixed width, too (blue)

Attention on the space at the top and the bottom, there should be a space.

I din't really know that much methods on realizing/solving this problem.
So I searched for methods on how to realize and I found the CSS Calc() function. Is it true that this "function" is just experimental? I tested it with this function but I didn't really got a successfull result so I don't know any more methods.

My problems I got when testing to resolve this issue was that the white background of the content-inner box where all the content is located went away :/
I tried to fix it with the Bootstrap class clearfix but I wasn't successfull.

So do you have any solution on how to solve this problem?

Thank you for all the helpfull results and answers and thank you for any help. :)