标签: css-calc

我正在努力实现一些我甚至不太确定的事情.

我正在尝试在我的网站的导航下放置一个特定的阴影PNG图像.但是我也希望将此功能重用于我希望在网站上使用的任何对象,无论是图像,div还是按钮.基本上对任何对象使用相同的阴影图像.

使用css3 calc()函数我试图做对象的高度@ 100%+ 25px(png的高度).

我尝试过造型:

height: -webkit-calc(100% + 25px); 
height:    -moz-calc(100% + 25px); 
height:      -o-calc(100% + 25px); 

但是从我在Firebug 100%+ 25px中可以收集到的是新的100%,因为这没有任何结果.

我也尝试过:

height: -webkit-calc(100% + 25px); 
height:    -moz-calc(100% + 25px); 
height:      -o-calc(100% + 25px); 
background-position: 0 -moz-calc(100% + 25px);

但这里也没有喜悦.

如果我使用calc(3em + 25px); 它没有问题,但这不足以灵活地处理任何对象.

这甚至可能吗？我甚至有意义吗？!

我怎样才能做到这一点？

$('#element').animate({ "width": "calc(100% - 278px)" }, 800);
$('#element').animate({ "width": "calc(100% - 78px)" }, 800);

我能做到这一点,如果它是唯一的%或唯一的px,但不是calc(),我可以使用jQuery的一些其他的选择吗？或者其他一些JavaScript技巧？

当用户单击某个元素时,必须进行更改,因此:

$("#otherElement").on("click", FunctionToToggle);

当用户点击时,$("#otherElement")必须发生切换效果.

我有以下代码,它可以很好地集中我的内容,直到vh少于那么650px.我想知道是否有办法让这个值永远不会0只使用CSS calc.

.my-margin-top {
    margin-top: calc(50vh - 325px);
}

有没有办法使用较少的css calc()例程？

如果我去http://less2css.org/ 并输入以下输入(这只是一个常规的CSS规则):

width: calc(100% - 450px);

输出应该完全相同(因为它是常规的css)但是,

编译器产生的css输出是 width: calc(-350%);

有没有办法让这个工作？

我可以使用带边框宽度的calc()吗？

我想以下CSS工作:

.my-element {
  border-left-width: calc(10% + 10px);
  border-right-width: calc(10% + 20px);
}

但无论出于何种原因,我提供的任何价值calc()都没有任何边界.我在MDN上找到的文档并不清楚是否可以使用calc - 它说我应该使用Any <length> value,但这包括calc吗？

我的目标是IE9,但我在Chrome 34和Firefox 28中得到了相同的结果.我知道我也可以使用jQuery来实现这些目标,但我想尽可能避免使用它.

我需要验证CSS3文件,我正在使用以下代码:

width:calc(96.3% - 312px)

它返回此错误:

值错误:宽度分析错误 - 312px)

我最后的选择是在页面加载和窗口大小调整时使用Javascript函数来获取宽度值,当使用CSS3时(仅适用于IE8或更早版本).

我制作了一个自定义进度条，由三个单独的部分组成（一个独特的可定制中心部分、一个左侧部分和一个右侧部分），但我很难在所有阶段正确对齐中心块。

首先，我将使用三个图形布局显示所需的最终状态，然后我将描述当前的问题，最后我将提供我当前的解决方法 hack，这是有问题的，需要某种修复。

三个期望
状态：显示1%左对齐的起始状态的期望结果：

中间块完美位于中间的中途状态的预期结果50%：

中心块完全停在100%右对齐的所需最终状态：

body{margin: 100px; background: #CCC}

.fullbar{
    background-color: blue;
    width: 100%;
}

.progress{
    background: green;
  margin: 10px 0 0 0;
    text-align: right;
    padding: 0 0px 1px 0px;
    line-height: 5px;
}

.number{
  background: inherit;
  color: #FFF;
    padding: 4px;
    padding: 0 2px 1px 3px;
 
}

<div class="fullbar">
<div class="progress" style="width:50%">
    <div class="number">50%</div>
</div>
</div>

问题
当状态为 50% 时，中心块应该在中间完美地水平对齐。然而事实并非如此。行尾居中，而不是包含实际数字“50%”的 div。

附注。出于未知原因，中心块的主体未在代码视图中正确呈现。也许我大量的 css 重置使我的进度条看起来与这里的裸代码不同。但它关于类名的 divnumber需要正确居中，目前还没有。

我哈克解决方案，工作不正常和不优雅
我试图用包裹的中心部分width:112%作为一个黑客以进度条，得到中央嵌段完美中间，就像这样： …

<div id="outerDiv">
    <div id="innerDiv"></div>
    <div id="remainderDiv"></div>
</div>

#outerDiv, #innerDiv, #remainderDiv{
    height: 100px;
}
#outerDiv{
    width: 55.5px;
    z-index: 1;
    background-color: red;
}
#innerDiv{
    width: calc(100% - 10px);
    z-index: 100;
    background-color: blue;
    float: left;
}
#remainderDiv{
    width: 10px;
    z-index: 100;
    background-color: green;
    float: left;
}

http://jsfiddle.net/yz8cwj3a/

结果:http://i.imgur.com/DYor2yb.png

这个小提琴显示了Chrome 37的一个问题.对具有小数像素的元素使用calc(100% - 10px)函数,它总是向下舍入.这会导致奇怪的事情.

在该示例中,外部div的宽度为50.5px.两个内部div具有calc(100% - 10px)和10px作为宽度.虽然这应该是50.5,但它仍然显示红色背景.

问题似乎是在Chome 37引入的.有没有人知道这个问题是否已经被报道和/或是否会被解决？

编辑:我从评论中了解到该问题已经存在了很长时间.有没有(跨浏览器)整洁的方法来解决这个问题？

我有以下情况:

div {
    width: calc((100% / 11) - 9.09px);
}

在上下文中,100% = 1440px,并且在数学中使用sass生成9.09px.

结果是:94.55px,因为calc函数向上舍入,但我需要94.54px(向下舍入).

我怎样才能向下舍入到最接近的百分位？

#Edit:示例.

我有相对复杂的公式，例如 transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))

如何调试计算值？此外，有没有一种方法可以验证/突出显示公式错误？

我试图这样输出到伪元素，但没有运气

    position: fixed;
    display: block;
    left:0;
    right: 0;
    background: yellow;
    padding: 5px;
    z-index: 100;
    content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));

我发现的唯一方法是将计算的一部分放到未使用的数值属性background-position-x上，例如在下面的gif上，这样它将在计算选项卡上显示计算值-有用但不是很方便（background-position-x在页面滚动时注意更改）：

    position: fixed;
    display: block;
    left:0;
    right: 0;
    background: yellow;
    padding: 5px;
    z-index: 100;
    content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));

var sc = ScrollOut({
    cssProps: true
  })
  const results …